API tools faq
paste
Advertisement
Guest User

product-template.liquid (SEARCH "matt c" or "warehouse"

a guest
Apr 27th, 2019
1,756
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.17 KB | None | 0 0
raw download clone embed print report
  1. <div class="product-template__container page-width"
  2. id="ProductSection-{{ section.id }}"
  3. data-section-id="{{ section.id }}"
  4. data-section-type="product"
  5. data-enable-history-state="true"
  6. >
  7. {% comment %}
  8. Get first variant, or deep linked one
  9. {% endcomment %}
  10. {%- assign current_variant = product.selected_or_first_available_variant -%}
  11. {%- assign product_image_zoom_size = '1024x1024' -%}
  12. {%- assign product_image_scale = '2' -%}
  13. {%- assign enable_zoom = section.settings.enable_zoom -%}
  14. {%- assign compare_at_price = current_variant.compare_at_price -%}
  15. {%- assign price = current_variant.price -%}
  16.  
  17. {% case section.settings.image_size %}
  18. {% when 'small' %}
  19. {%- assign product_image_width = 'medium-up--one-third' -%}
  20. {%- assign product_description_width = 'medium-up--two-thirds' -%}
  21. {%- assign product_thumbnail_width = 'medium-up--one-third' -%}
  22. {%- assign height = 345 -%}
  23. {% when 'medium' %}
  24. {%- assign product_image_width = 'medium-up--one-half' -%}
  25. {%- assign product_description_width = 'medium-up--one-half' -%}
  26. {%- assign product_thumbnail_width = 'medium-up--one-quarter' -%}
  27. {%- assign height = 530 -%}
  28. {% when 'large' %}
  29. {%- assign product_image_width = 'medium-up--two-thirds' -%}
  30. {%- assign product_description_width = 'medium-up--one-third' -%}
  31. {%- assign product_thumbnail_width = 'medium-up--one-fifth' -%}
  32. {%- assign height = 720 -%}
  33. {% when 'full' %}
  34. {%- assign product_image_width = '' -%}
  35. {%- assign product_description_width = '' -%}
  36. {%- assign product_thumbnail_width = 'medium-up--one-eighth' -%}
  37. {%- assign height = 1090 -%}
  38. {%- assign enable_zoom = false -%}
  39. {% endcase %}
  40.  
  41. <div class="grid product-single{% if section.settings.enable_payment_button %} product-single--{{ section.settings.image_size }}-image{% endif %}">
  42. <div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
  43. {%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
  44. {% for image in product.images %}
  45. {% capture img_id %}FeaturedImage-{{ section.id }}-{{ image.id }}{% endcapture %}
  46. {% capture img_class %}product-featured-img{% endcapture %}
  47. {% capture zoom_img_id %}FeaturedImageZoom-{{ section.id }}-{{ image.id }}{% endcapture %}
  48. {% capture img_wrapper_id %}{{ zoom_img_id }}-wrapper{% endcapture %}
  49. {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
  50.  
  51. {% include 'image-style' with small_style: true, width: height, height: height, wrapper_id: img_wrapper_id, img_id: img_id %}
  52.  
  53. <div id="{{ img_wrapper_id }}" class="product-single__photo-wrapper js">
  54. <div
  55. id="{{ zoom_img_id }}"
  56. style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;"
  57. 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 %}"
  58. data-image-id="{{ image.id }}"
  59. {% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
  60. <img id="{{ img_id }}"
  61. class="feature-row__image {{ img_class }} lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
  62. src="{{ image | img_url: '300x300' }}"
  63. data-src="{{ img_url }}"
  64. data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
  65. data-aspectratio="{{ image.aspect_ratio }}"
  66. data-sizes="auto"
  67. tabindex="-1"
  68. alt="{{ image.alt | escape }}">
  69. </div>
  70. </div>
  71. {% endfor %}
  72.  
  73. <noscript>
  74. {% capture product_image_size %}{{ height }}x{% endcapture %}
  75. <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;">
  76. </noscript>
  77.  
  78. {% if product.images.size > 1 %}
  79. {% if product.images.size > 3 %}
  80. {%- assign enable_thumbnail_slides = true -%}
  81. {% endif %}
  82.  
  83. <div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}">
  84. {% if enable_thumbnail_slides == true %}
  85. <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}">
  86. {% include 'icon-chevron-left' %}
  87. <span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
  88. </button>
  89. {% endif %}
  90. <ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}">
  91. {% for image in product.images %}
  92. <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js">
  93. <a href="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"
  94. class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
  95. data-thumbnail-id="{{ image.id }}"
  96. {% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
  97. <img class="product-single__thumbnail-image" src="{{ image.src | img_url: '110x110', scale: 2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: image.alt | escape }}">
  98. </a>
  99. </li>
  100. {% endfor %}
  101. </ul>
  102. {% if enable_thumbnail_slides == true %}
  103. <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">
  104. {% include 'icon-chevron-right' %}
  105. <span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
  106. </button>
  107. {% endif %}
  108. </div>
  109. {% endif %}
  110. </div>
  111.  
  112. <div class="grid__item {{ product_description_width }}">
  113. <div class="product-single__meta">
  114.  
  115. <h1 class="product-single__title">{{ product.title }}
  116. <div product-id="{{ product.id }}" class="alr-display-review-badge"></div>
  117. </h1>
  118.  
  119.  
  120. <div class="product__price">
  121. {% include 'product-price', variant: current_variant %}
  122. </div>
  123.  
  124. {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
  125. <div class="product__policies rte">
  126. {%- if shop.taxes_included -%}
  127. {{ 'products.product.include_taxes' | t }}
  128. {%- endif -%}
  129. {%- if shop.shipping_policy.body != blank -%}
  130. {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
  131. {%- endif -%}
  132. </div>
  133. {%- endif -%}
  134.  
  135. {% if section.settings.show_quantity_selector %}
  136. <div id="error-quantity-{{ section.id }}" class="form-message form-message--error product__quantity-error hide" tabindex="-1">
  137. {% include 'icon-error' %} {{ 'products.product.quantity_minimum_message' | t }}
  138. </div>
  139. {% endif %}
  140.  
  141. {% capture "form_classes" -%}
  142. 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 %}
  143. {%- endcapture %}
  144.  
  145. {% form 'product', product, class:form_classes, novalidate: 'novalidate' %}
  146. {% unless product.has_only_default_variant %}
  147. {% for option in product.options_with_values %}
  148. <div class="selector-wrapper js product-form__item">
  149. <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
  150. {{ option.name }}
  151. </label>
  152. <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
  153. {% for value in option.values %}
  154. <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
  155. {% endfor %}
  156. </select>
  157. </div>
  158. {% endfor %}
  159. {% endunless %}
  160.  
  161. <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
  162. {% for variant in product.variants %}
  163. {% if variant.available %}
  164. <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
  165. {{ variant.title }}
  166. </option>
  167. {% else %}
  168. <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
  169. {% endif %}
  170. {% endfor %}
  171. </select>
  172.  
  173. {% if section.settings.show_quantity_selector %}
  174. <div class="product-form__item product-form__item--quantity">
  175. <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
  176. <input type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*">
  177. </div>
  178. {% endif %}
  179. <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 %}">
  180. <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 %}">
  181. <span id="AddToCartText-{{ section.id }}">
  182. {% unless current_variant.available %}
  183. {{ 'products.product.sold_out' | t }}
  184. {% else %}
  185. {{ 'products.product.add_to_cart' | t }}
  186. {% endunless %}
  187. </span>
  188. </button>
  189. {% if section.settings.enable_payment_button %}
  190. {{ form | payment_button }}
  191. {% endif %}
  192. </div>
  193.  
  194. {% endform %}
  195.  
  196. {% comment %} Added by Matt C, Shopify Theme Support April 23 2019 {% endcomment %}
  197. {% if section.settings.show_inventory %}
  198. <br>
  199. <div id="inventoryQuantity__wrapper">
  200. <ul>
  201.  
  202. <li class="trusttext"><span class="truststyle">In Stock:</span> Leaves warehouse in 1 to 3 business days</li>
  203. <li class="trusttext"><span class="truststyle">30 Days</span> Money Back Guarantee</li>
  204. <li class="trusttext"><span class="truststyle">100%</span> Safe and Secure</li>
  205. </ul>
  206.  
  207.  
  208. {% comment %}
  209. {% if current_variant.available %}
  210. {{ 'products.product.remaining' | t }} <span id="inventoryQuantity">{{ current_variant.inventory_quantity }}</span>
  211. {% endif %}
  212. {% endcomment %}
  213. </div>
  214. {% endif %}
  215.  
  216.  
  217. </div>
  218.  
  219. {%- comment -%}
  220. Live region for announcing updated price and availability to screen readers
  221. {%- endcomment -%}
  222. <p class="visually-hidden" data-product-status
  223. aria-live="polite"
  224. role="status"
  225. ></p>
  226.  
  227. <div class="product-single__description rte">
  228. {{ product.description }}
  229. </div>
  230.  
  231. {% if section.settings.show_share_buttons %}
  232. {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
  233. {% endif %}
  234. </div>
  235. </div>
  236. </div>
  237.  
  238. {% if collection %}
  239. <div class="text-center return-link-wrapper page-width">
  240. <a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
  241. {% include 'icon-arrow-left' %}
  242. {{ 'products.product.back_to_collection' | t: title: collection.title }}
  243. </a>
  244. </div>
  245. {% endif %}
  246.  
  247. {% unless product == empty %}
  248. <script type="application/json" id="ProductJson-{{ section.id }}">
  249. {{ product | json }}
  250. </script>
  251. {% endunless %}
  252.  
  253. {% comment %} Added by Matt C, Shopify Theme Support April 23 2019 {% endcomment %}
  254. <script>
  255. var variant_inventory = [];
  256. const inventory_language = "{{ 'products.product.remaining' | t }}";
  257. {% for variant in product.variants %}
  258. variant_inventory[ {{ variant.id }} ] = {{ variant.inventory_quantity }};
  259. {% endfor %}
  260. </script>
  261.  
  262. {% schema %}
  263. {
  264. "name": {
  265. "de": "Produktseiten",
  266. "en": "Product pages",
  267. "es": "Páginas de productos",
  268. "fr": "Pages de produits",
  269. "it": "Pagine di prodotto",
  270. "ja": "商品ページ",
  271. "nl": "Productpagina's",
  272. "pt-BR": "Páginas de produtos",
  273. "zh-CN": "产品页面",
  274. "zh-TW": "產品頁面"
  275. },
  276. "settings": [
  277. {
  278. "type": "select",
  279. "id": "image_size",
  280. "label": {
  281. "de": "Foto-Größe",
  282. "en": "Image size",
  283. "es": "Tamaño de la imagen",
  284. "fr": "Taille des images",
  285. "it": "Dimensione immagine",
  286. "ja": "画像のサイズ",
  287. "nl": "Afbeeldingsformaat",
  288. "pt-BR": "Tamanho da imagem",
  289. "zh-CN": "图片尺寸",
  290. "zh-TW": "圖片尺寸"
  291. },
  292. "options": [
  293. {
  294. "value": "small",
  295. "label": {
  296. "de": "Klein",
  297. "en": "Small",
  298. "es": "Pequeña",
  299. "fr": "Petite",
  300. "it": "Piccolo",
  301. "ja": "小",
  302. "nl": "Klein",
  303. "pt-BR": "Pequeno",
  304. "zh-CN": "小",
  305. "zh-TW": "小型"
  306. }
  307. },
  308. {
  309. "value": "medium",
  310. "label": {
  311. "de": "Mittel",
  312. "en": "Medium",
  313. "es": "Mediana",
  314. "fr": "Moyenne",
  315. "it": "Medio",
  316. "ja": "中",
  317. "nl": "Gemiddeld",
  318. "pt-BR": "Médio",
  319. "zh-CN": "中等",
  320. "zh-TW": "中等"
  321. }
  322. },
  323. {
  324. "value": "large",
  325. "label": {
  326. "de": "Groß",
  327. "en": "Large",
  328. "es": "Grande",
  329. "fr": "Grande",
  330. "it": "Grande",
  331. "ja": "大",
  332. "nl": "Groot",
  333. "pt-BR": "Grande",
  334. "zh-CN": "大",
  335. "zh-TW": "大型"
  336. }
  337. },
  338. {
  339. "value": "full",
  340. "label": {
  341. "de": "Volle Breite",
  342. "en": "Full-width",
  343. "es": "Ancho completo",
  344. "fr": "Pleine largeur",
  345. "it": "Intera larghezza",
  346. "ja": "全幅",
  347. "nl": "Volledige breedte",
  348. "pt-BR": "Largura completa",
  349. "zh-CN": "全宽",
  350. "zh-TW": "完整寬度"
  351. }
  352. }
  353. ],
  354. "default": "medium"
  355. },
  356. {
  357. "type": "checkbox",
  358. "id": "show_inventory",
  359. "info": "Text can be changed in [theme Language settings](https://covval.myshopify.com/admin/themes/19866222645/language?query=Remaining+Items+Available)",
  360. "label": {
  361. "en": "Show available inventory"
  362. },
  363. "default": true
  364. },
  365. {
  366. "type": "checkbox",
  367. "id": "show_quantity_selector",
  368. "label": {
  369. "de": "Quantitäts-Auswahl anzeigen",
  370. "en": "Show quantity selector",
  371. "es": "Mostrar selector de cantidad",
  372. "fr": "Afficher le sélecteur de quantité",
  373. "it": "Mostra selettore quantità",
  374. "ja": "数量セレクターを表示する",
  375. "nl": "Hoeveelheidskiezer weergeven",
  376. "pt-BR": "Exibir seletor de quantidade",
  377. "zh-CN": "显示数量选择器",
  378. "zh-TW": "顯示數量選擇器"
  379. },
  380. "default": false
  381. },
  382. {
  383. "type": "checkbox",
  384. "id": "show_variant_labels",
  385. "label": {
  386. "de": "Varianten-Etiketten anzeigen",
  387. "en": "Show variant labels",
  388. "es": "Mostrar etiquetas de variantes",
  389. "fr": "Afficher le nom des variantes",
  390. "it": "Mostra etichette varianti",
  391. "ja": "バリエーションのラベルを表示する",
  392. "nl": "Variantlabels weergeven",
  393. "pt-BR": "Exibir etiquetas de variantes",
  394. "zh-CN": "显示变体标签",
  395. "zh-TW": "顯示子類選項標籤"
  396. },
  397. "default": true
  398. },
  399. {
  400. "type": "checkbox",
  401. "id": "show_vendor",
  402. "label": {
  403. "de": "Lieferanten anzeigen",
  404. "en": "Show vendor",
  405. "es": "Mostrar proveedor",
  406. "fr": "Afficher les vendeurs",
  407. "it": "Mostra fornitore",
  408. "ja": "販売元を表示する",
  409. "nl": "Leverancier weergeven",
  410. "pt-BR": "Exibir fornecedor",
  411. "zh-CN": "显示厂商",
  412. "zh-TW": "顯示廠商"
  413. },
  414. "default": false
  415. },
  416. {
  417. "type": "checkbox",
  418. "id": "enable_zoom",
  419. "label": {
  420. "de": "Foto-Zoom zulassen",
  421. "en": "Enable image zoom",
  422. "es": "Habilitar zoom de imagen",
  423. "fr": "Activer le zoom d'image",
  424. "it": "Abilita lo zoom dell'immagine",
  425. "ja": "画像ズームを有効にする",
  426. "nl": "Inzoomen op afbeelding inschakelen",
  427. "pt-BR": "Ativar o zoom da imagem",
  428. "zh-CN": "启用图片缩放",
  429. "zh-TW": "啟用圖片縮放"
  430. },
  431. "default": true
  432. },
  433. {
  434. "type": "checkbox",
  435. "id": "enable_payment_button",
  436. "label": {
  437. "de": "Dynamischen Checkout Button anzeigen",
  438. "en": "Show dynamic checkout button",
  439. "es": "Mostrar botón de pago dinámico",
  440. "fr": "Afficher le bouton de passage à la caisse dynamique",
  441. "it": "Mostra pulsante di check-out dinamico",
  442. "ja": "ダイナミックチェックアウトボタンを表示する",
  443. "nl": "Dynamische kassaknop weergeven",
  444. "pt-BR": "Exibir botão dinâmico de finalização da compra",
  445. "zh-CN": "显示动态结账按钮",
  446. "zh-TW": "顯示動態結帳按鈕"
  447. },
  448. "info": {
  449. "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)",
  450. "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)",
  451. "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)",
  452. "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)",
  453. "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)",
  454. "ja": "PayPalやApple Payなど、ストアで利用可能な希望の決済方法がお客様に表示されます。[もっと詳しく] (https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
  455. "nl": "Elke klant ziet zijn of haar beschikbare voorkeursmethode om af te rekenen, zoals PayPal of Apple Pay. [Meer informatie](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
  456. "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)",
  457. "zh-CN": "每位客户都可在您商店提供的付款方式中看到他们的首选付款方式，例如 PayPal 或 Apple Pay。[了解详细信息](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
  458. "zh-TW": "每位客戶都可以在您商店內開放使用的付款方式中看見他們偏好使用的方式，如 PayPal、Apple Pay 等。[深入瞭解相關資訊](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)"
  459. },
  460. "default": true
  461. },
  462. {
  463. "type": "checkbox",
  464. "id": "show_share_buttons",
  465. "label": {
  466. "de": "Buttons für Social Media anzeigen",
  467. "en": "Show social sharing buttons",
  468. "es": "Mostrar botones para compartir en redes sociales",
  469. "fr": "Affichez les boutons de partage sur les médias sociaux",
  470. "it": "Mostra i pulsanti per la condivisione sui social",
  471. "ja": "ソーシャル共有ボタンを表示する",
  472. "nl": "Knoppen voor sociaal delen weergeven",
  473. "pt-BR": "Exibir botões de compartilhamento em redes sociais",
  474. "zh-CN": "显示社交分享按钮",
  475. "zh-TW": "顯示社群分享按鈕"
  476. },
  477. "default": true
  478. }
  479. ]
  480. }
  481. {% endschema %}
  482.  
  483.  
  484.  
  485. <div id="shopify-ali-review" product-id="{{ product.id }}"> {{ shop.metafields.review_collector.review_code }} </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!