I am having difficulty getting my variants to carry over to my shopping cart on my product page for my custom storenvy store.
Any help would be much appreciated! I am not much a of a coder. I think I am close, but I could be wrong.
Here is the code I am using and the link to the live page is: http://apricotmantle.storenvy.com/collections/259687-merch/products/17058861-bloody-beach-zombie-limited-edition-pinup-print
CODE:
<div class="slide products_{{product.id}} active">
<div class="home-content">
<img class="artwork" src {{product.photo.url}}" alt="{{product.name | escape }}" />
<div class="artworkContent">
<h1>{{ product.name }}</h1>
<div id="add_notice" style="display:none;"></div>
{% if product.description != blank %}
{{ product.description | auto_link | paragraphs }}
{% endif %}
{% if product.image_count > 1 %}
<div id="slider-code">
<div class="viewport">
<ul class="overview" id="thumbs">
{% for photo in product.photos offset:1 limit:3 %}
<li>
<a href="{{photo.url}}" class="product_thumb" {%if forloop.first %}id="first_thumb" {%endif%} rel="product_photos">
<img src="{{photo.medium_url}}" height="100" width="145" alt="{{product.name | h}} - Thumbnail {{forloop.index}}"/>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if product.coming_soon %}
<h3>Coming soon!</h3>
{% else %}
{% for variant in product.variants limit:1 %}
<div class="add {{ variant.status }}">
{% if variant.quantity < 1 %}
<img src="/themes/default/images/btn_sold_out-v2.png" />
{% else %}
<p id="price">{{ product.price | money_with_sign }}</p>
<form id="add-to-cart" action="/cart/add" method="post" >
<select id="variant-select">
<option>Product Options</option>
{% for variant in product.variants %}
<option value="{{ variant.id }}">{{variant.title }} for {{ variant.price | money}}</option>
{% endfor %}
</select>
<input type="image" name="add" value="Purchase" id="purchase" src="{{ 'purchase.png' | asset_url}}" />
<span id="product-price">{{ product.price | money }}</span>
</form>
{% endif %}
</div><!-- end .add -->
<div class="{{ product.css_class }}">
{% if product.on_sale %}<div class="sale">On Sale</div>{% endif %}
{% if product.preorder %}<div class="preorder">Pre-Order</div>{% endif %}
{% if product.coming_soon %}<div class="soon">Coming Soon</div>{% endif %}
{% if product.sold_out %}<div class="soldout">Sold Out</div>{% endif %}
</div>
{% endfor %}
{% endif %}
Storenvy Marketplace Page
<!--<h6>Share This</h6>
<div id="share_product">
{{ product | facebook_like_button }}
{{ product | tweet_button }}
{{ product | wanelo_button }}
{{ product | pinterest_button }}
<hr/>
</div>-->
</div><!-- end .product_info --></div>
</div>
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 have API that generates table that uses Flask-Moment. API returns HTML code and then it's displayed on the page, but column that uses Flask-Moment is empty. I think it's somehow connected with the fact that Flask-Moment can't (probably) work with dynamically generated HTML.
So, how to use Flask-Moment with dynamically generated HTML?
Table screenshot
responses/submissions.html:
<div class="submissions_table">
<div class="table_header__wrapper">
<div class="table_header">
{# Result #}
<div class="table_header_column result">
<p>RESULT</p>
</div>
{# Language #}
<div class="table_header_column language">
<p>LANGUAGE</p>
</div>
{# Time #}
<div class="table_header_column time">
<p>TIME</p>
</div>
{# View result #}
<div class="table_header_column view_result"></div>
</div>
</div>
<div class="table_body">
{% for submission in submissions %}
<div class="table_row__wrapper">
<div class="table_row">
{# Result #}
{% set submission_result = submission.get_result() %}
{% if submission_result['success'] %}
{% set result_status = 'success' %}
{% else %}
{% set result_status = 'fail' %}
{% endif %}
<div class="table_row_column result {{ result_status }}">
{# Status icon #}
{% if submission_result['success'] %}
<i class="result__icon far fa-check-circle"></i>
{% else %}
<i class="result__icon far fa-times-circle"></i>
{% endif %}
<p>{{ submission_result['message'] }}</p>
</div>
{# Language #}
<div class="table_row_column language">
{% set language_info = languages.get_info(submission.language) %}
<img src="{{ language_info['icon'] }}" alt="" class="language__icon">
<p class="language__name">{{ language_info['fullname'] }}</p>
</div>
{# Time #}
<div class="table_row_column time">{{ moment(submission.submission_date).fromNow() }}</div>
{# View result #}
<div class="table_row_column view_result">View Result</div>
</div>
</div>
{% endfor %}
</div>
</div>
Good Day,
I'm trying to change the button based on my product template on Shopify but it seems like its not working please check my code and test site below
Demo: https://strokes-test.myshopify.com/collections/frontpage
I make a control flow for the template object but its not working.
Code.liquid
<div
id="ProductSection-{{ section.id }}"
data-section-id="{{ section.id }}"
data-section-type="product"
data-enable-history-state="true"
data-ajax-enabled="{{ settings.enable_ajax }}"
>
<form method="post" action="/cart/add" id="product_form_5928354152609" accept-charset="UTF-8" enctype="multipart/form-data" novalidate="novalidate" data-product-form>
{% if product.variants.size == 1 %}<ul class="item-swatch color_swatch_Value"><br>
<input type="hidden" name="id" value="{{ product.variants[0].id }}" />
{% else %}
<select class="hidden" name="id">{% for variant in product.variants %}<option value="{{ variant.id }}">{{ variant.title }}</option>{% endfor %} class="product-form__variants no-js"</select>
{% endif %}
<ul class="item-swatch color_swatch_Value">
{% for option in product.options %}
{% if option == 'Shades' %}
{% assign index = forloop.index0 %}
{% assign colorlist = '' %}
{% assign color = '' %}
{% for variant in product.variants %}
{% capture color %}
{{ variant.options[index] }}
{% endcapture %}
{% unless colorlist contains color %}
{% assign text = color | handleize %}
<li>
<label value="{{ variant.id}}" style="{% if text == 'white' %}border: 1px solid #cbcbcb; {% endif %}background-color: {{ color | split: ' ' | last | handle }}; background-image: url({{ text | append: '.png' | file_url }});"></label>
{% if variant.image != null %}
<div class="hidden">
<img src="{{ variant.image.src | product_img_url: 'grande' }}" alt="{{ text }}"/>
</div>
{% endif %}
</li>
{% capture tempList %}
{{ colorlist | append: color | append: ' ' }}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
</ul>
{% if template.name == "product" %}
<input type="submit" value="Add to cart" name="add" class=" btn product-form__cart-submit btn--secondary-accent " aria-haspopup="dialog" data-add-to-cart/>
{% else %}
<input type="submit" value="Choose Set" class=" btn product-form__cart-submit btn--secondary-accent " aria-haspopup="dialog" data-add-to-cart/ onclick="window.location='{{ product.url | within: collection }}';" />
{% endif %}
</div>
</form>
{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
<script type="application/json" id="ModelJson-{{ section.id }}">
{{ product.media | where: 'media_type', 'model' | json }}
</script>
{% endunless %}
when on product.liquid template template_suffix is empty "". when on product.bundle.liquid, template_suffix is "bundle"
{% if product.template_suffix == "" %}
<input type="submit" value="Add to cart" name="add" class=" btn product-form__cart-submit btn--secondary-accent " aria-haspopup="dialog" data-add-to-cart/>
{% elsif product.template_suffix == "bundle" %}
<input type="submit" value="Choose Set" class=" btn product-form__cart-submit btn--secondary-accent " aria-haspopup="dialog" data-add-to-cart onclick="window.location='{{ product.url | within: collection }}';" />
{% endif %}
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 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...