PRODUCT TEMPLATE ZOOM SHOPIFY DEBUT THEME

-
PRODUCT TEMPLATE ZOOM SHOPIFY
-------------------------------------------------------------------------------------------------------------------------
PRODUCT TEMPLATE ZOOM SHOPIFY DEBUT THEME
READ MORE:
or use this code for IMAGE
-------------------------------------------------------------------------------------------------------------------------
<div
id="{{ zoom_img_id }}"
style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;"
class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}{% unless featured_image == image %} hide{% endunless %}"
data-image-id="{{ image.id }}"
{% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
<a data-image="{{ image.src | img_url: '1024x1024' }}">
<img id="ProductPhotoImg" 
class="feature-row__image product-featured-img {% if section.settings.product_zoom_enable %}product-zoom{% endif %}"
src="{{ image | img_url: '600x600' }}"
alt="{{ image.alt | escape }}">
</a>
</div>

-------------------------------------------------------------------------------------------------------------------------

or use this code for thumbnails
<div id="ProductThumbs">
{%- for image in product.images -%}
<li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js">
<a href="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"
class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
data-thumbnail-id="{{ image.id }}"
{% if product_zoom_enable %}data-zoom="{{ image.src | img_url: '1024x1024' }}"{% endif %}>
<img src="{{image|img_url:'110x110' }}"> 
</a>
</li>
{%- endfor -%}
</div>

-------------------------------------------------------------------------------------------------------------------------
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js" type="text/javascript"></script>
<style>
/* CODE IS TAKEN FROM bootstrap.min.css */
.container {
position: relative;
height: 300px;
width: 411px;
}
.zoomLens{
background-position: 0px 0px;
border: 4px solid rgb(136, 136, 136);
width: 200px;
height: 200px;
background-repeat: no-repeat;
position:relative;
border-radius:100px;
display: none;
}  
</style>

<div class="product-template__container page-width"
id="ProductSection-{{ section.id }}"
data-section-id="{{ section.id }}"
data-section-type="product"
data-enable-history-state="true"
>
{% comment %}
Get first variant, or deep linked one
{% endcomment %}
{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign product_image_zoom_size = '1024x1024' -%}
{%- assign product_image_scale = '2' -%}
{%- assign enable_zoom = section.settings.enable_zoom -%}
{%- assign compare_at_price = current_variant.compare_at_price -%}
{%- assign price = current_variant.price -%}

{% case section.settings.image_size %}
{% when 'small' %}
{%- assign product_image_width = 'medium-up--one-third' -%}
{%- assign product_description_width = 'medium-up--two-thirds' -%}
{%- assign product_thumbnail_width = 'medium-up--one-third' -%}
{%- assign height = 345 -%}
{% when 'medium' %}
{%- assign product_image_width = 'medium-up--one-half' -%}
{%- assign product_description_width = 'medium-up--one-half' -%}
{%- assign product_thumbnail_width = 'medium-up--one-quarter' -%}
{%- assign height = 530 -%}
{% when 'large' %}
{%- assign product_image_width = 'medium-up--two-thirds' -%}
{%- assign product_description_width = 'medium-up--one-third' -%}
{%- assign product_thumbnail_width = 'medium-up--one-fifth' -%}
{%- assign height = 720 -%}
{% when 'full' %}
{%- assign product_image_width = '' -%}
{%- assign product_description_width = '' -%}
{%- assign product_thumbnail_width = 'medium-up--one-eighth' -%}
{%- assign height = 1090 -%}
{%- assign enable_zoom = false -%}
{% endcase %}

<div class="grid product-single{% if section.settings.enable_payment_button %} product-single--{{ section.settings.image_size }}-image{% endif %}">
<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
{% for image in product.images %}
{% capture img_id %}FeaturedImage-{{ section.id }}-{{ image.id }}{% endcapture %}
{% capture img_class %}product-featured-img{% endcapture %}
{% capture zoom_img_id %}FeaturedImageZoom-{{ section.id }}-{{ image.id }}{% endcapture %}
{% capture img_wrapper_id %}{{ zoom_img_id }}-wrapper{% endcapture %}
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% include 'image-style' with small_style: true, width: height, height: height, wrapper_id: img_wrapper_id, img_id: img_id %}

<div id="{{ img_wrapper_id }}" class="product-single__photo-wrapper js">
<div
id="{{ zoom_img_id }}"
style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;"
class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}{% unless featured_image == image %} hide{% endunless %}"
data-image-id="{{ image.id }}"
{% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
<a data-image="{{ image.src | img_url: '1024x1024' }}">
<img id="ProductPhotoImg" 
class="feature-row__image {{ img_class }} lazyload{% unless featured_image == image %} lazypreload{% endunless %} {% if section.settings.product_zoom_enable %}product-zoom{% endif %}"
src="{{ image | img_url: '600x600' }}"       
alt="{{ image.alt | escape }}">
</a>
</div>
</div>
{% endfor %}

<noscript>
{% capture product_image_size %}{{ height }}x{% endcapture %}
<img src="{{ featured_image | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_image.alt }}" id="FeaturedImage-{{ section.id }}" class="product-featured-img" style="max-width: {{ height }}px;">
</noscript>

{% if product.images.size > 1 %}
{% if product.images.size > 3 %}
{%- assign enable_thumbnail_slides = true -%}
{% endif %}

<div id="ProductThumbs">
{%- for image in product.images -%}
<a data-image="{{ image.src | img_url: '1024x1024' }}">
<img src="{{image|img_url:'110x110' }}"> 
</a>
{%- endfor -%}
</div>
{% endif %}
</div>

<div class="grid__item {{ product_description_width }}">
<div class="product-single__meta">

<h1 class="product-single__title">{{ product.title }}</h1>

<div class="product__price">
{% include 'product-price', variant: current_variant %}
</div>

{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte">
{%- if shop.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</div>
{%- endif -%}

{% if section.settings.show_quantity_selector %}
<div id="error-quantity-{{ section.id }}" class="form-message form-message--error product__quantity-error hide" tabindex="-1">
{% include 'icon-error' %} {{ 'products.product.quantity_minimum_message' | t }}
</div>
{% endif %}

{% capture "form_classes" -%}
product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}{% if section.settings.enable_payment_button and product.has_only_default_variant%} product-form--payment-button-no-variants{% endif %}
{%- endcapture %}

{% form 'product', product, class:form_classes, novalidate: 'novalidate' %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
{{ option.name }}
</label>
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
</div>
{% endfor %}
{% endunless %}

<select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
{{ variant.title }}
</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
{% endif %}
{% endfor %}
</select>

{% if section.settings.show_quantity_selector %}
<div class="product-form__item product-form__item--quantity">
<label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*">
</div>
{% endif %}
<div class="product-form__item product-form__item--submit{% if section.settings.enable_payment_button %} product-form__item--payment-button{% endif %}{% if product.has_only_default_variant %} product-form__item--no-variants{% endif %}">
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}">
<span id="AddToCartText-{{ section.id }}">
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
{% endform %}
</div>

{%- comment -%}
Live region for announcing updated price and availability to screen readers
{%- endcomment -%}
<p class="visually-hidden" data-product-status
aria-live="polite"
role="status"
></p>

<div class="product-single__description rte">
{{ product.description }}
</div>

{% if section.settings.show_share_buttons %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
</div>
</div>
</div>

{% if collection %}
<div class="text-center return-link-wrapper page-width">
<a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
{% include 'icon-arrow-left' %}
{{ 'products.product.back_to_collection' | t: title: collection.title }}
</a>
</div>
{% endif %}

{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% endunless %}



<script>
{%- if section.settings.product_zoom_enable -%}
function productZoom(){
$(".product-zoom").elevateZoom({
gallery: 'ProductThumbs',
galleryActiveClass: "active",

zoomWindowWidth:411,
zoomWindowHeight:274,
zoomWindowOffetx:0,
zoomWindowOffety:0,
scrollZoom:true,


zoomType: "{{ section.settings.zoom_type }}",
cursor: "crosshair"
});
{%- if section.settings.product_popup_enable -%}
$(".product-zoom").on("click", function(e) {
var ez = $('.product-zoom').data('elevateZoom');
$.fancybox(ez.getGalleryList());
return false;
});
{% endif %}
};
function productZoomDisable(){
if( $(window).width() < 767 ) {
$('.zoomContainer').remove();
$(".product-zoom").removeData('elevateZoom');
$(".product-zoom").removeData('zoomImage');
} else {
productZoom();
}
};
productZoomDisable();
$(window).resize(function() {
productZoomDisable();
});
{%- endif -%}
</script>

{% schema %}
{
"name": {
"de": "Produktseiten",
"en": "Product pages",
"es": "Páginas de productos",
"fr": "Pages de produits",
"it": "Pagine di prodotto",
"ja": "商品ページ",
"pt-BR": "Páginas de produtos"
},
"settings": [
{
"type": "select",
"id": "image_size",
"label": {
"de": "Foto-Größe",
"en": "Image size",
"es": "Tamaño de la imagen",
"fr": "Taille des images",
"it": "Dimensione immagine",
"ja": "画像のサイズ",
"pt-BR": "Tamanho da imagem"
},
"options": [
{
"value": "small",
"label": {
"de": "Klein",
"en": "Small",
"es": "Pequeña",
"fr": "Petite",
"it": "Piccolo",
"ja": "小",
"pt-BR": "Pequeno"
}
},
{
"value": "medium",
"label": {
"de": "Mittel",
"en": "Medium",
"es": "Mediana",
"fr": "Moyenne",
"it": "Medio",
"ja": "中",
"pt-BR": "Médio"
}
},
{
"value": "large",
"label": {
"de": "Groß",
"en": "Large",
"es": "Grande",
"fr": "Grande",
"it": "Grande",
"ja": "大",
"pt-BR": "Grande"
}
},
{
"value": "full",
"label": {
"de": "Volle Breite",
"en": "Full-width",
"es": "Ancho completo",
"fr": "Pleine largeur",
"it": "Intera larghezza",
"ja": "全幅",
"pt-BR": "Largura completa"
}
}
],
"default": "medium"
},
{
"type": "checkbox",
"id": "show_quantity_selector",
"label": {
"de": "Quantitäts-Auswahl anzeigen",
"en": "Show quantity selector",
"es": "Mostrar selector de cantidad",
"fr": "Afficher le sélecteur de quantité",
"it": "Mostra selettore quantità",
"ja": "数量セレクターを表示する",
"pt-BR": "Exibir seletor de quantidade"
},
"default": false
},
{
"type": "checkbox",
"id": "show_variant_labels",
"label": {
"de": "Varianten-Etiketten anzeigen",
"en": "Show variant labels",
"es": "Mostrar etiquetas de variantes",
"fr": "Afficher le nom des variantes",
"it": "Mostra etichette varianti",
"ja": "バリエーションのラベルを表示する",
"pt-BR": "Exibir etiquetas de variantes"
},
"default": true
},
{
"type": "checkbox",
"id": "show_vendor",
"label": {
"de": "Lieferanten anzeigen",
"en": "Show vendor",
"es": "Mostrar proveedor",
"fr": "Afficher les vendeurs",
"it": "Mostra fornitore",
"ja": "販売元を表示する",
"pt-BR": "Exibir fornecedor"
},
"default": false
},

{
"type": "header",
"content": "Product Zoom"
}
,
{
"type": "checkbox",
"id": "product_zoom_enable",
"label": "Product Zoom Enable",
"default": true
}
,
{
"type": "select",
"id": "zoom_type",
"label": "Zoom Type",
"default": "inner",
"options":[
{
"label": "Lens",
"value": "lens"
},
{
"label": "Window",
"value": "window"
},
{
"label": "Inner",
"value": "inner"
}
]
}
,

{
"type": "checkbox",
"id": "enable_payment_button",
"label": {
"de": "Dynamischen Checkout Button anzeigen",
"en": "Show dynamic checkout button",
"es": "Mostrar botón de pago dinámico",
"fr": "Afficher le bouton de passage à la caisse dynamique",
"it": "Mostra pulsante di check-out dinamico",
"ja": "ダイナミックチェックアウトボタンを表示する",
"pt-BR": "Exibir botão dinâmico de finalização da compra"
},
"info": {
"de": "Jeder Kunde sieht seine bevorzugte Zahlungsmethode aus den in Ihrem Shop verfügbaren Zahlungsmethoden wie PayPal oder Apple Pay. [Mehr Infos](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"en": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"es": "Cada cliente verá su forma de pago preferida entre las disponibles en tu tienda, como PayPal o Apple Pay. [Más información](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"fr": "Chaque client verra son moyen de paiement préféré parmi ceux qui sont proposés sur votre boutique, tels que PayPal ou Apple Pay. [En savoir plus](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"it": "Ogni cliente vedrà il suo metodo di pagamento preferito tra quelli disponibili nel tuo negozio, come PayPal o Apple Pay. [Maggiori informazioni](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"ja": "PayPalやApple Payなど、ストアで利用可能な希望の決済方法がお客様に表示されます。[もっと詳しく] (https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"pt-BR": "Cada cliente verá seu método de pagamento preferido dentre os disponíveis na loja, como PayPal ou Apple Pay. [Saiba mais](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)"
},
"default": true
},
{
"type": "checkbox",
"id": "show_share_buttons",
"label": {
"de": "Buttons für Social Media anzeigen",
"en": "Show social sharing buttons",
"es": "Mostrar botones para compartir en redes sociales",
"fr": "Affichez les boutons de partage sur les médias sociaux",
"it": "Mostra i pulsanti per la condivisione sui social",
"ja": "ソーシャル共有ボタンを表示する",
"pt-BR": "Exibir botões de compartilhamento em redes sociais"
},
"default": true
}
]
}
{% endschema %}


Comments

Post a Comment

Popular posts from this blog

ADD AUTOCOMPLETE SEARCH BOX IN SHOPIFY DEBUT THEME 5️⃣

-
Image
  ------------------------------------------------------------------------------------------------------------------------ ADD AUTOCOMPLETE SEARCH BOX IN SHOPIFY READ MORE https://youtu.be/acTT5_lkrCg https://stackoverflow.com/questions/45477730/ajax-jquery-autocomplete-in-search-box-shopify https://stackoverflow.com/questions/39593169/sorting-json-results-by-10-max-results DOWNLOAD: https://fbgadgets.myshopify.com/admin/files/0e841afc73cd3152ebf447feabe7abfa/theme_export__fbgadgets-myshopify-com-shopify-debut-theme__05JUL2022-0654am.zip/download ------------------------------------------------------------------------------------------------------------------------ 1) NEEDS JQUERY FILE WITHOUT ASYNC OR DEFFER IN LINK LIKE <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script> --> OR CHANGE VENDOR JS FILE LINK IN  LAYOUT>THEME LIQUID FILE <script src="{{ 'vendor.js' | asset_url }}"></script> ...
Read more