I want to upload video in my shopify store my code has for loop
<div class="product-slider-show">
<div class="owl-carousel">
{% for image in product.images %}
<div class="swiper-product-image">
<a class="cloud-zoom-gallery sub-image" id="product-image-options-" href="{{ image.src | img_url: 'master' }}" title="{{ featured_img_alt }}"
rel="useZoom: 'product-cloud-zoom', smallImage: '{{ image.src | img_url: 'master' }}'" data-pos="{{ forloop.index }}">
<img {% if settings.lazyloading_enable %} class="lazyload" data-{% endif %}src="{{ image.src | img_url: 'master' }}" title="{{ featured_img_alt }}" alt="{{ featured_img_alt }}" />
</a>
</div>
{% endfor %}
</div>
</div>
When I add video html to this code, video shows up next to each pictures.
What code should I use in this for loop, so that the video can appear alone at the end?
if anyone else is having this problem. This code was my solution
{% for image in product.images %}
{% if forloop.first == true %}
<figure>
<img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" class="product_variant_image">
</figure>
{% else %}
<figure>
<img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}">
</figure>
{% endif %}
{% endfor %}
{% for media in product.media %}
{% if media.media_type == 'video' %}
{{ media | video_tag: controls: true, preload: true, image_size: "768x" }}
{% endif %}
{% endfor %}
Related
Good Day, dear community!
I posted this question to the Shopify forum but unfortunately I did not get any help with this. So I am trying my luck here. :)
I thought it would be easier for me to swap the sticky product__media-wrapper with product__info-wrapper.
Currently the media-wrapper is sticky and follows the scrolling of the product page.
I would like to change this with the content of product__info-wrapper but only until the description.
Basically place the product__media-wrapper where the title and buybuttons are right now and let the buy buttons, variant and quantity picker follow the scrolling but also let the description stay below the newly placed media.
Like this:
I have an understanding of code, but my skills are limited.
I managed to locate the parts and where it needs to be adjusted, but I can't make it work properly.
Any help is deeply appreciated!
Here is the part of the code that would need the editing (I suppose):
<div class="product product--{{ section.settings.media_size }} product--{{ section.settings.gallery_layout }} grid grid--1-col {% if product.media.size > 0 %}grid--2-col-tablet{% else %}product--no-media{% endif %}">
<div class="grid__item product__media-wrapper">
<media-gallery id="MediaGallery-{{ section.id }}" role="region" {% if section.settings.enable_sticky_info %}class="product__media-gallery"{% endif %} aria-label="{{ 'products.product.media.gallery_viewer' | t }}" data-desktop-layout="{{ section.settings.gallery_layout }}">
...
</media-gallery>
</div>
<div class="product__info-wrapper grid__item{% if settings.page_width > 1400 and section.settings.media_size == "small" %} product__info-wrapper--extra-padding{% endif %}">
<div id="ProductInfo-{{ section.id }}" class="product__info-container{% if section.settings.enable_sticky_info %} product__info-container--sticky{% endif %}">
{%- assign product_form_id = 'product-form-' | append: section.id -%}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when '#app' -%}
{% render block %}
{%- when 'text' -%}
<p class="product__text{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}" {{ block.shopify_attributes }}>
{{- block.settings.text -}}
</p>
{%- when 'title' -%}
<div class="product__title" {{ block.shopify_attributes }}>
<h1>{{ product.title | escape }}</h1>
<a href="{{ product.url }}" class="product__title">
<h2 class="h1">
{{ product.title | escape }}
</h2>
</a>
</div>
{%- when 'price' -%}
<div class="no-js-hidden" id="price-{{ section.id }}" role="status" {{ block.shopify_attributes }}>
{%- render 'price', product: product, use_variant: true, show_badges: true, price_class: 'price--large' -%}
</div>
{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__tax caption 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 -%}
<div {{ block.shopify_attributes }}>
{%- assign product_form_installment_id = 'product-form-installment-' | append: section.id -%}
{%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
{{ form | payment_terms }}
{%- endform -%}
</div>
{%- when 'description' -%}
{%- if product.description != blank -%}
<div class="product__description rte quick-add-hidden">
{{ product.description }}
</div>
{%- endif -%}
{%- when 'custom_liquid' -%}
{{ block.settings.custom_liquid }}
{%- when 'collapsible_tab' -%}
<div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}>
<details id="Details-{{ block.id }}-{{ section.id }}">
<summary>
<div class="summary__title">
{% render 'icon-accordion', icon: block.settings.icon %}
<h2 class="h4 accordion__title">
{{ block.settings.heading | default: block.settings.page.title }}
</h2>
</div>
{% render 'icon-caret' %}
</summary>
<div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
{{ block.settings.content }}
{{ block.settings.page.content }}
</div>
</details>
</div>
{%- when 'quantity_selector' -%}
<div class="product-form__input product-form__quantity{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} product-form__quantity-top{% endif %}" {{ block.shopify_attributes }}>
<label class="form__label" for="Quantity-{{ section.id }}">
{{ 'products.product.quantity.label' | t }}
</label>
<quantity-input class="quantity">
<button class="quantity__button no-js-hidden" name="minus" type="button">
<span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
{% render 'icon-minus' %}
</button>
<input class="quantity__input"
type="number"
name="quantity"
id="Quantity-{{ section.id }}"
min="1"
value="1"
form="{{ product_form_id }}"
>
<button class="quantity__button no-js-hidden" name="plus" type="button">
<span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
{% render 'icon-plus' %}
</button>
</quantity-input>
</div>
{%- when 'popup' -%}
<modal-opener class="product-popup-modal__opener no-js-hidden quick-add-hidden" data-modal="#PopupModal-{{ block.id }}" {{ block.shopify_attributes }}>
<button id="ProductPopup-{{ block.id }}" class="product-popup-modal__button link" type="button" aria-haspopup="dialog">{{ block.settings.text | default: block.settings.page.title }}</button>
</modal-opener>
{{ block.settings.text }}
{%- when 'share' -%}
<share-button id="Share-{{ section.id }}" class="share-button quick-add-hidden" {{ block.shopify_attributes }}>
<button class="share-button__button hidden">
{% render 'icon-share' %}
{{ block.settings.share_label | escape }}
</button>
<details id="Details-{{ block.id }}-{{ section.id }}">
<summary class="share-button__button">
{% render 'icon-share' %}
{{ block.settings.share_label | escape }}
</summary>
<div id="Product-share-{{ section.id }}" class="share-button__fallback motion-reduce">
<div class="field">
<span id="ShareMessage-{{ section.id }}" class="share-button__message hidden" role="status">
</span>
<input type="text"
class="field__input"
id="url"
value="{{ product.selected_variant.url | default: product.url | prepend: request.origin }}"
placeholder="{{ 'general.share.share_url' | t }}"
onclick="this.select();"
readonly
>
<label class="field__label" for="url">{{ 'general.share.share_url' | t }}</label>
</div>
<button class="share-button__close hidden no-js-hidden">
{% render 'icon-close' %}
<span class="visually-hidden">{{ 'general.share.close' | t }}</span>
</button>
<button class="share-button__copy no-js-hidden">
{% render 'icon-clipboard' %}
<span class="visually-hidden">{{ 'general.share.copy_to_clipboard' | t }}</span>
</button>
</div>
</details>
</share-button>
<script src="{{ 'share.js' | asset_url }}" defer="defer"></script>
{%- when 'variant_picker' -%}
{%- unless product.has_only_default_variant -%}
{%- if block.settings.picker_type == 'button' -%}
<variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
{%- for option in product.options_with_values -%}
<fieldset class="js product-form__input">
<legend class="form__label">{{ option.name }}</legend>
{%- for value in option.values -%}
<input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
name="{{ option.name }}"
value="{{ value | escape }}"
form="{{ product_form_id }}"
{% if option.selected_value == value %}checked{% endif %}
>
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value }}
</label>
{%- endfor -%}
</fieldset>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-radios>
{%- else -%}
<variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
{%- for option in product.options_with_values -%}
<div class="product-form__input product-form__input--dropdown">
<label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<div class="select">
<select id="Option-{{ section.id }}-{{ forloop.index0 }}"
class="select__select"
name="options[{{ option.name | escape }}]"
form="{{ product_form_id }}"
>
{%- for value in option.values -%}
<option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
{{ value }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-selects>
{%- endif -%}
{%- endunless -%}
<noscript class="product-form__noscript-wrapper-{{ section.id }}">
<div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
<label class="form__label" for="Variants-{{ section.id }}">{{ 'products.product.product_variants' | t }}</label>
<div class="select">
<select name="id" id="Variants-{{ section.id }}" class="select__select" form="{{ product_form_id }}">
{%- for variant in product.variants -%}
<option
{% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
{% if variant.available == false %}disabled{% endif %}
value="{{ variant.id }}"
>
{{ variant.title }}
{%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
- {{ variant.price | money | strip_html }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
</noscript>
{%- when 'buy_buttons' -%}
<div {{ block.shopify_attributes }}>
<product-form class="product-form">
<div class="product-form__error-message-wrapper" role="alert" hidden>
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-error" viewBox="0 0 13 13">
<circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
<path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
<path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
</svg>
<span class="product-form__error-message"></span>
</div>
{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" disabled>
<div class="product-form__buttons">
<button
type="submit"
name="add"
class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
{% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
>
<span>
{%- if product.selected_or_first_available_variant.available -%}
{{ 'products.product.add_to_cart' | t }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
</span>
<div class="loading-overlay__spinner hidden">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>
{%- if block.settings.show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
</div>
{%- endform -%}
</product-form>
{{ 'component-pickup-availability.css' | asset_url | stylesheet_tag }}
{%- assign pick_up_availabilities = product.selected_or_first_available_variant.store_availabilities | where: 'pick_up_enabled', true -%}
<pickup-availability class="product__pickup-availabilities no-js-hidden quick-add-hidden"
{% if product.selected_or_first_available_variant.available and pick_up_availabilities.size > 0 %} available{% endif %}
data-root-url="{{ routes.root_url }}"
data-variant-id="{{ product.selected_or_first_available_variant.id }}"
data-has-only-default-variant="{{ product.has_only_default_variant }}"
>
<template>
<pickup-availability-preview class="pickup-availability-preview">
{% render 'icon-unavailable' %}
<div class="pickup-availability-info">
<p class="caption-large">{{ 'products.product.pickup_availability.unavailable' | t }}</p>
<button class="pickup-availability-button link link--text underlined-link">{{ 'products.product.pickup_availability.refresh' | t }}</button>
</div>
</pickup-availability-preview>
</template>
</pickup-availability>
</div>
<script src="{{ 'pickup-availability.js' | asset_url }}" defer="defer"></script>
{%- when 'rating' -%}
{%- if product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}
<div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product.metafields.reviews.rating.value, rating_max: product.metafields.reviews.rating.value.scale_max }}">
<span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
</div>
<p class="rating-text caption">
<span aria-hidden="true">{{ product.metafields.reviews.rating.value }} / {{ product.metafields.reviews.rating.value.scale_max }}</span>
</p>
<p class="rating-count caption">
<span aria-hidden="true">({{ product.metafields.reviews.rating_count }})</span>
<span class="visually-hidden">{{ product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
</p>
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
<a href="{{ product.url }}" class="link product__view-details animate-arrow">
{{ 'products.product.view_full_details' | t }}
{% render 'icon-arrow' %}
</a>
</div>
</div>
Any help with this would be super appreciated.
Thanks a lot in advance!
Cheers
Erik
i need to add video in the product gallery .For this i am going through this tutorial https://shopify.dev/tutorials/add-theme-support-for-rich-media-3d-and-video
But when i add this code The product image is disappeared and the video is not uploaded also.
I am use this code in Product template and media below.
// Product-template
{% for media in product.media %}
{% include 'media' %}
{% endfor %}
//In midea
{% case media.media_type %}
{% when 'image' %}
<div class="thumb">
<a class="fancybox" rel="gallery1" href="{{ image.src | product_img_url: '1024x1024' }}" >
<img id="product-featured-image-{{image.id}}" class="product-featured-img" src="{{ image | img_url: 'original' }}" alt="{{ image.alt | escape }}" data-zoom-image="{{ image.src | img_url: 'original' }}"/>
</a>
</div>
{% when 'external_video' %}
<div class="product-single__media" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100}}%;" data-media-id="{{ media.id }}">
{{ media | external_video_tag }}
</div>
{% when 'video' %}
<div class="product-single__media" data-media-id="{{ media.id }}">
{{ media | video_tag: controls: true }}
</div>
{% when 'model' %}
<div class="product-single__media" style="padding-top: 100%" data-media-id="{{ media.id }}">
{{ media | model_viewer_tag }}
</div>
{% else %}
<div class="product-single__media" style="padding-top: 100%;" data-media-id="{{ media.id }}">
{{ media | media_tag }}
</div>
{% endcase %}
Product.media and product images are different objects.
{% for media in product.media %}
{% if media.media_type == 'video' %}
{{ media | video_tag: controls: true, preload: true, image_size: "1024x" }}
{% endif %}
{% endfor %}
{% for image in product.images %}
{% if forloop.first == true %}
<figure>
<img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" class="product_variant_image">
</figure>
{% else %}
<figure>
<img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}">
</figure>
{% endif %}
{% endfor %}
You need a mix of the two objects or add the photos you want to show it into media.
I have used the WOWSLIDER for product detail page and working fine but when I am changing the color attribute and the slide is not active according to the current image.
Screenshot
I shared the source code. please have a look. Also attached the screenshot
left side images are showing with help of wow slider
right side attributes are showing.
{% include 'sca_freegift_price' with product %}
{% include 'breadcrumbs' %}
{% assign variant = product.selected_or_first_available_variant %}
{% if collection == null or collection.handle == 'frontpage' or collection.handle == 'all' %}
{% assign found_a_collection = false %}
{% for c in product.collections %}
{% if found_a_collection == false and c.handle != 'frontpage' and c.handle != 'all' %}
{% assign found_a_collection = true %}
{% assign collection = c %}
{% endif %}
{% endfor %}
{% endif %}
{% unless form_id %}
{% assign form_id = product.id %}
{% endunless %}
<section
class="main-product-wrap
product-wrap
{% if section.settings.related-products %}related-products-position-{{ section.settings.related-products-position }}{% endif %}"
itemscope
itemtype="http://schema.org/Product"
data-product-id="{{ product.id }}"
data-images-layout="{{ section.settings.images-layout }}"
{% if section.settings.zoom %}data-zoom{% endif %}
{% if section.settings.linked-options %}data-linked-options{% endif %}
{% if section.settings.ajax %}data-ajax{% endif %}
data-section-id="{{ section.id }}"
data-section-type="product">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product | img_url: 'grande' }}">
<div class="product-images">
{% if section.settings.images-layout == 'slideshow' %}
<div id="wowslider-container1">
<div class="ws_images" ><ul>
{% assign mainImage = variant.image | default: product.featured_image %}
{% for image in product.images %}
<li class="extraimage"><img src="{{ image | img_url: '1024x1024' }}" alt="" id="wows1_{{ forloop.index }}"/></li>
{% endfor %}
</ul>
</div>
<div class="ws_thumbs">
<div>
{% for image in product.images %}
{% if mainImage == image %}
<img src="{{ mainImage | img_url: '1024x1024' }}" alt="" />
{% else %}
<img src="{{ image | img_url: '1024x1024' }}" alt="" />
{% endif %}
{% endfor %}
</div>
</div>
<div class="ws_shadow"></div>
</div>
<div class="product-thumbnails-outer-wrapper">
<div class="sca-fg-cat-list" style="display:none;" name="secomapp-fg-data-{{ product.id }}"> </div>
</div>
{% if product.images.size > 1 %}
{% if product.tags contains "cabin" %}
<div class="cabin-logo-container">
<div class="product-cabin"><h5>This product is suitable to take as a cabin item on:</h5></div>
{% else %}
{% endif %}
{% if product.tags contains "easyjet" %}
<div class="easyjet-cabin"><img src="https://cdn.shopify.com/s/files/1/1567/7015/files/easyjet_ca2d8259-58eb-4e77-b7f1-75e1ca187b8c.jpg?14358281107398952302"></div>
{% else %}
{% endif %}
{% if product.tags contains "ryanair" %}
<div class="ryanair-cabin"><img src="https://cdn.shopify.com/s/files/1/1567/7015/files/ryanair_734b4c75-c1db-452f-93b1-61fc09939573.png?14358281107398952302"></div>
{% else %}
{% endif %}
{% if product.tags contains "british-airways" %}
<div class="britishairways-cabin"><img src="https://cdn.shopify.com/s/files/1/1567/7015/files/british_airways_bf46e962-6f35-43ba-b78a-dcec0179b12b.png?14358281107398952302"></div>
</div>
{% else %}
{% endif %}
{% endif %}
{% else %}
{% for image in product.images %}
<div class="product-image">
<img
alt="{{ image.alt | escape }}"
src="{{ image | img_url: '1024x1024' }}"
data-image-id="{{ image.id }}"
>
</div>
{% endfor %}
{% endif %}
</div>
<div class="product-details-wrapper">
<div class="product-details">
{% if section.settings.vendor %}
<a class="product-vendor" href="{{ product.vendor | url_for_vendor }}">{{ product.vendor }}</a>
{% endif %}
<h1 class="product-title" itemprop="name"><div style="position:relative;"> {{ product.title }} <div name="secomapp-fg-image-{{ product.id }}" style="display: none;"> {{ "icon-freegift.png" | asset_url | img_tag: "Free Gift", "sca-fg-img-label" }} </div> </div></h1>
<p class="product-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<meta itemprop="price" content="{{ sca_price_min | money_without_currency }}">
<span class="product-price-minimum money">
{{ variant.price | money }}
</span>
{% if variant.compare_at_price > variant.price %}
<span class="product-price-compare money original">
{{ variant.compare_at_price | money }}
</span>
{% endif %}
{% if product.tags contains "shipped-by-supplier" %}
<div class="supplier-delivery-icon"><img src="https://cdn.shopify.com/s/files/1/1567/7015/files/delivery.png?7054402976003297472" alt="Shipped by supplier"><p>Shipped by supplier</p></div>
{% else %}
{% endif %}
{% if product.available %}
<link itemprop="availability" href="http://schema.org/InStock">
{% else %}
<link itemprop="availability" href="http://schema.org/OutOfStock">
{% endif %}
</p>
<form class="product-form"
id="product-form-{{ form_id }}"
action="/cart/add"
method="post"
data-product-form="{{ form_id }}">
{% if sca_product_variantCount > 1 %}
<div class="product-options">
{% include 'product-options-dropdown' %}
<div class="selector-wrapper no-js-required">
<label for="product-select-{{ form_id }}"></label>
<select
class="product-select"
name="id"
id="product-select-{{ form_id }}">
{% for variant in product.variants %}
{% unless variant.metafields.secomapp.freegifts %}
{% unless variant.title contains '(Freegifts)' %}
{% if variant.available %}
<option
{% if variant == selected_variant %}selected="selected"{% endif %}
value="{{ variant.id }}" data-variant-id="{{ variant.id }}" data-sku="{{ variant.sku }}">
{{ variant.title }} - {{ variant.price | money }}
</option>
{% else %}
<option disabled="disabled" data-variant-id="{{ variant.id }}" value="{{ variant.id }}">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{%endunless%}
{%endunless%}
{% endfor %}
</select>
</div>
</div>
{% else %}
<input
class="product-select"
name="id"
value="{{ product.variants[0].id }}"
type="hidden"
data-variant-title="{{ product.variants[0].title }}" />
{% endif %}
{% if product.available %}
<div id="infiniteoptions-container"></div>
<div id="uploadery-container"></div>
<div class="product-quantity inline-input-wrapper">
<label>{{ 'general.general.quantity' | t }}</label>
<input type="text" name="quantity" value="1" />
</div>
{% endif %}
{% if section.settings.share-buttons %}
{% include 'share-buttons' %}
{% endif %}
<div class="add-to-cart">
{% if variant.available %}
<input type="submit" value="{{ 'products.product.add_to_cart' | t }}" />
{% else %}
<input type="submit" class="disabled" disabled="disabled" value="{{ 'products.product.sold_out' | t }}" />
{% endif %}
</div>
<div class="product-message"></div>
</form>
{% if product.description != blank %}
<div class="product-description rte" itemprop="description">
{{ product.description }}
</div>
{% endif %}
</div>
</div>
{% assign addToCartText = 'products.product.add_to_cart' | t %}
{%
include 'product-json',
id: product.id,
add_to_cart_text: addToCartText,
enable_history: true
%}
</section>
{% if section.settings.related-products %}
{%- assign related_products_position = section.settings.related-products-position -%}
{% include 'related-products' related_products_position: related_products_position %}
{% endif %}
<script>
// required for splitting variants
// see ProductView
window.products["{{ product.id }}"] = {{ product | json }};
FirstVariant["{{ product.id }}"] = {{ product.selected_or_first_available_variant.id | json }};
</script>
I'm working on a thumbnail carousel using bootstrap carousel. However I need to modify the data-slide behaviour as I'm pulling in the carousel items dynamically.
So what I'm trying to do is add an ID (something like 3672764 which will be the image ID) to the data-slide-to attribute and on clicking on the thumbnail it should slide to the slide that has the same ID.
This is the code:
<div id="carousel" class="carousel slide" data-ride="false">
<div class="carousel-inner">
<div class="item active srle" data-id="{{ image.id }}">
<img src="{{ featured_image | img_url: '1000x1000' }}" alt="{{ featured_image.alt | escape }}" data-product-featured-image>
<p>{{ featured_image.alt | escape }}</p>
</div>
{% for image in product.images offset:1 %}
<div class="item" data-id="{{ image.id }}">
<img src="{{ image.src | img_url: '1000x1000' }}" alt="{{ image.alt | escape }}">
<p>{{ image.alt | escape }}</p>
</div>
{% endfor %}
</div>
</div>
<div id="thumbcarousel" class="carousel slide thumbnails-carousel vertical" data-ride="false">
<div class="carousel-inner">
{% for image in product.images %}
<div class="grid__item carousel-padding">
<div data-target="#carousel" data-slide-to="{{ image.id }}" class="thumb"><img src="{{ image.src | img_url: '160x160' }}" alt="{{ image.alt | escape }}" data-product-single-thumbnail>
</div>
</div>
{% endfor %}
</div>
</div>
Any ideas how to do this?
I am facing problem in Add to cart button in my Website. (I am using Shopify).
Before this problem I had an add to cart button in my product page. When I click add to Cart button, my product is added into the cart. But you won't notice unless you look to the Cart icon in the top of the page which was impossible on mobile to see it while you're clicking it.
So my thoughts to improve it was to redirect to Cart page right after the click but I'm facing a problem. Some people when click on the Add to Cart button they're redirected to an Empty cart page.
First I tried to insert a code that I saw (and possibly is not the best one) on the bottom of my html file. And when I faced that problem I don't know why but I thought to insert the code on Google Tag Manager to load on all pages thinking that will resolve my problem. Wrong! All the same.
I'm not very good in javascript. I'm a designer but I've changed everything on this theme always trying to improve it.
I would love to have some Help please.
The Code that I was using at first was:
<script type="text/javascript">
document.getElementById("btnAddtocart").onclick = function () {
location.href = "/cart";
};
</script>
Then I thought I should insert a delay to the script and I changed the code to:
<script type="text/javascript">
setTimeout(function() {
document.getElementById("btnAddtocart").onclick = function () {
location.href = "/cart";
};
}, 750);
</script>
Everything was the same. Some people would have products on cart and other people won't.
Please keep in mind that I don't know javascript. Maybe this script that I'm adding is not the best one and some type of cookie is lost in the process or something like that and maybe some devices/browsers lose the product information when they're redirected.
My product_1column.liquid code is:
<div class="product-single">
<div class="row">
<div class="col-md-5 col-sm-5">
<div class="product-media thumbnai-{{ thumbnai_position }}">
<div class="product-single-photos pull-{{ thumbnai_position }}">
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
<!-- ZOOM NO TOUCH -->
<a href="{{ featured_image | img_url: 'master' }}" class="cloud-zoom" data-rel="position: 'inside', useWrapper: false, showTitle: false, zoomWidth:'auto', zoomHeight:'auto', adjustY:0, adjustX:10">
<img src="{{ featured_image | img_url: '1024x1024' }}" alt="{{ featured_image.alt | escape }}" title="Optional title display">
</a>
</div>
<!--<p class="visible-sm visible-xs a-center">Click on the image to zoom</p>-->
<div class="more-views">
<div class="swiper-container" data-margin="10" data-items="5" data-xs-items="5" data-direction="{% if thumbnai_position == "none" %}horizontal{% else %}vertical{% endif %}" >
<div class="swiper-wrapper">
{% for image in product.images %}
<div class="swiper-slide">
<a href="{{ image.src | img_url: 'master' }}" class="thumb-link" title="" data-rel="{{ image.src | img_url: '1024x1024' }}">
<img src="{{ image.src | img_url: 'medium' }}" alt="{{ image.alt | escape }}">
</a>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7 col-sm-7">
<div class="product-info">
<h1 itemprop="name">{{ product.title }}</h1>
{% if product_review %}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{% endif %}
{% if product.available %}
{% comment %} <span class="available instock"><i class="fa fa-check-square-o"></i>{{ 'products.product.inStock' | t }}</span>{% endcomment %}
{% else %}
<span class="available outofstock"><i class="fa fa-check-square-o"></i>{{ 'products.product.outOfStock' | t }}</span>
{% endif %}
{% if product_vendor %}
<span class="product-vendor">{{ 'products.product.vendor' | t }}{{ product.vendor }}</span>
{% endif %}
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
{% assign variant = product.selected_or_first_available_variant %}
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
<div class="product-single-prices">
<span id="ProductPrice" class="price" itemprop="price">
{{ product.price | money }}
</span>
{% if product.compare_at_price > product.price %}
<s id="ComparePrice" class="product-single-sale">
{{ product.compare_at_price_max | money }}
</s>
{% endif %}
</div>
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
<div class="product-options {% unless settings.color_swatch %} linked-options{% endunless %}">
<select name="id" id="productSelect" class="product-single-variants">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
{% if settings.color_swatch %}
{% if product.available and product.variants.size > 1 %}
{% for option in product.options %}
{% include 'swatch' with option %}
{% endfor %}
{% endif %}
{% endif %}
</div>
<div class="product-actions">
<div class="product-single-quantity{% unless settings.product_quantity_enable %} is-hidden{% endunless %}">
<label class="label" for="Quantity">{{ 'products.product.quantity' | t }}</label>
<div class="quantity">
<span class='qtyminus' data-field='quantity'><i class="fa fa-angle-down"></i></span>
<input type='text' id="Quantity" data-field='quantity' name='quantity' value='1' class='quantity-selector' />
<span class='qtyplus' data-field='quantity'><i class="fa fa-angle-up"></i></span>
</div>
</div>
{% if product.available %}
<button type="submit" name="add" id="btnAddtocart" class="btn btn-primary btn-addToCart">
{{ 'products.product.add_to_cart' | t }}
</button>
{% else %}
<input type="submit" name="add" class="btn btn-primary btn-addToCart" id="product-addTocart" disabled value="{{ 'products.product.unavailable' | t }}">
{% endif %}
<div class="product-wishlist">
{% include 'add-to-wishlist' %}
</div>
</div>
</form>
<div class="product-description rte" itemprop="description">
{{ product.description }}
</div>
{% if settings.social_sharing_products %}
<div class="product-sharing">
{% include 'social-sharing' %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% include 'product-info' %}
{% if settings.related_product %}
{% include 'related-products' %}
{% endif %}
Plus, this theme have a .js file that I think is super relevant to this problem:
https://privatebin.net/?28b4693d0a1e0a73#/JycpCfEEeAqmn2Fr/5+99VgOMilFkS3jMZz/3EQm5g=
And the original theme is http://gred-themes.com/landingpage/simolux/ so you can see how it was in the beginning.
Thank you in advance for your help.
When you do location.href='/cart' you are instructing the browser to jump to the cart. An empty cart is an empty cart if you go there.
Instead you want to submit the form with the added product(s) to the cart, in which case Shopify will add the products in the form to the cart, and in some cases may transfer the browser to the cart.
Sorry if that is confusing, but from your code, it seems you are indeed just sending yourself to the cart, without taking the time to add the products to the cart that you want to buy.
So to sum up.. you have a submit button that is supposed to submit the cart. Just let it do it's thing. Take out your event listener for onclick. You do nothing with that anyway, so get rid of it. Or in your click listener, do whatever you want, but also submit the form!! So you have to get a reference to the form, and use the submit() on it...