J'ai des soucis avec la pagination. J'ai voulu personnaliser la pagination en affichant un maximum de 33 produits par page. Malgré cela, lorsque je navigue sur les pages de la pagination, le nombre des produits qui s'affichent est aléatoire et ne correspond pas à 33 produits.
De plus, je n'arrive pas dans ma search box à afficher les produits disposant de variantes. La recherche n'affiche que les produits sans variantes. J'ai passé des heures dessus sans résultat.
</style>
{% if shop.customer_accounts_enabled %}
{% if customer %}
<div>
<div class="space-between-content-responsive">
</div>
<div class="space-between-content-responsive">
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Type de produits
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<ul class="">
<h1 class="title-produits">CATEGORIES</h1>
<li><a href="/collections/promotions" class="new-promo" accesskey="1">Promotions</a></li>
<li><a href="/collections/nouveautes" class="new-promo" accesskey="1">Nouveautés</a></li>
<li class="tiret">-</li>
<li><a href="/collections/tous-les-produits" accesskey="1">Tous les produits</a></li>
<li class="tiret">-</li>
<li><a href="/collections/cuisine" class="title-categories" accesskey="1">Cuisine</a></li>
<li><a class="title-sous-categories" href="/collections/boite-alimentaire" accesskey="1">Boîte alimentaire</a></li>
<li><a class="title-sous-categories" href="/collections/couverts" accesskey="1">Couverts</a></li>
<li><a class="title-sous-categories" href="/collections/dejeuner" accesskey="1">Déjeuner</a></li>
<li><a class="title-sous-categories" href="/collections/petit-appareil" accesskey="1">Petit appareil</a></li>
<li><a class="title-sous-categories" href="/collections/produit-comestible" accesskey="1">Produit comestible</a></li>
<li><a class="title-sous-categories" href="/collections/ustensile-accessoire" accesskey="1">Ustensile/accessoire</a></li>
<li><a class="title-sous-categories" href="/collections/vaisselle" accesskey="1">Vaisselle</a></li>
<li><a class="title-sous-categories" href="/collections/vaisselle-enfant" accesskey="1">Vaisselle enfant</a></li>
<li><a class="title-sous-categories" href="/collections/verre" accesskey="1">Verre</a></li>
<li class="tiret">-</li>
<li><a href="/collections/decoration" class="title-categories" accesskey="1">Décoration</a></li>
<li><a class="title-sous-categories" href="/collections/miroir-deco-murale" accesskey="1">Miroir/Déco</a></li>
<li><a class="title-sous-categories" href="/collections/bougie" accesskey="1">Bougie</a></li>
<li><a class="title-sous-categories" href="/collections/deco-lumineuse" accesskey="1">Déco lumineuse</a></li>
<li><a class="title-sous-categories" href="/collections/objet-decoratif" accesskey="1">Objet décoratif</a></li>
<li><a class="title-sous-categories" href="/collections/photophore-diffuseur" accesskey="1">Photophore/diffuseur</a></li>
<li><a class="title-sous-categories" href="/collections/rangement" accesskey="1">Rangement</a></li>
<li class="tiret">-</li>
<li><a class="title-categories" href="/collections/mobilier-luminaire" accesskey="1">Mobilier/Luminaire</a></li>
<li><a class="title-sous-categories" href="/collections/chaise-fauteuil" accesskey="1">Chaise/fauteuil</a></li>
<li><a class="title-sous-categories" href="/collections/literie" accesskey="1">Literie</a></li>
<li><a class="title-sous-categories" href="/collections/luminaire" accesskey="1">Luminaire</a></li>
<li><a class="title-sous-categories" href="/collections/meuble-rangement" accesskey="1">Meuble/Rangement</a></li>
<li><a class="title-sous-categories" href="/collections/table-bout-canape" accesskey="1">Table/Bout de canapé</a></li>
<li class="tiret">-</li>
<li><a href="/collections/salle-de-bain" class="title-categories" accesskey="1">Salle de bain</a></li>
<li><a class="title-sous-categories" href="/collections/accessoire-de-bain" accesskey="1">Accessoire de bain</a></li>
<li><a class="title-sous-categories" href="/collections/corbeille-panier" accesskey="1">Corbeille/panier</a></li>
<li><a class="title-sous-categories" href="/collections/poubelle" accesskey="1">Poubelle</a></li>
<li><a class="title-sous-categories" href="/collections/rangement-sdb" accesskey="1">Rangement SDB</a></li>
<li><a class="title-sous-categories" href="/collections/wc" accesskey="1">WC</a></li>
<li class="tiret">-</li>
<li><a href="/collections/linge-textile" class="title-categories" accesskey="1">Linge/Textile</a></li>
<li><a class="title-sous-categories" href="/collections/coussin" accesskey="1">Coussin</a></li>
<li><a class="title-sous-categories" href="/collections/linge-de-bain" accesskey="1">Linge de bain</a></li>
<li><a class="title-sous-categories" href="/collections/linge-de-table" accesskey="1">Linge de table</a></li>
<li class="tiret">-</li>
<li><a class="title-categories" href="/collections/bagage" accesskey="1">Bagage</a></li>
<li><a class="title-sous-categories" href="/collections/pochette-trousse" accesskey="1">Pochette/trousse</a></li>
<li><a class="title-sous-categories" href="/collections/sacs" accesskey="1">Sacs</a></li>
<li><a class="title-sous-categories" href="/collections/valise" accesskey="1">Valise</a></li>
<li class="tiret">-</li>
<li><a href="/collections/gadget-fete" class="title-categories" accesskey="1">Gadgets/Fêtes</a></li>
<li><a class="title-sous-categories" href="/collections/accessoire" accesskey="1">Accessoire</a></li>
<li><a class="title-sous-categories" href="/collections/papeterie" accesskey="1">Papeterie</a></li>
<li><a class="title-sous-categories" href="/collections/jouets" accesskey="1">Jouets</a></li>
<li class="tiret">-</li>
<li><a href="/collections/entretien" class="title-categories" accesskey="1">Entretien</a></li>
<li class="tiret">-</li>
<li><a href="/collections/outdoor" class="title-categories" accesskey="1">Outdoor</a></li>
<li><a class="title-sous-categories" href="/collections/accessoire-exterieur" accesskey="1">Accessoire extérieur</a></li>
<li><a class="title-sous-categories" href="/collections/deco-exterieur" accesskey="1">Déco extérieure</a></li>
<li><a class="title-sous-categories" href="/collections/mobilier-exterieur" accesskey="1">Mobilier extérieur</a></li>
</ul>
</div>
</div>
<form class="search-box-all" method="get" action="/collections/tous-les-produits">
<input class="search-product" type="text" name="q" />
<input type="submit" value="Rechercher" class="design-add-button" />
</form>
{% for product in all_products %}
{% assign i = 0 %}
{% increment i %}
{% endfor %}
<div class"display-flex-deux">
<div class="">
<div>
<div class="sidebar-sub-menu" data-section-id="sidebar" data-section-type="sidebar-section">
<nav class="grid__item small--text-center medium-up--one-fifth" role="navigation">
<div id="SiteNav" class="site-nav site-nav-design-product" role="menu">
<h1 class="title-produits">CATEGORIES</h1>
<ul>
<li><a href="/collections/promotions" class="new-promo" accesskey="1">Promotions</a></li>
<li><a href="/collections/nouveautes" class="new-promo" accesskey="1">Nouveautés</a></li>
<li class="tiret">-</li>
<li><a href="/collections/tous-les-produits" accesskey="1">Tous les produits</a></li>
<li class="tiret">-</li>
<li><a href="/collections/cuisine" class="title-categories" accesskey="1">Cuisine</a></li>
<li><a class="title-sous-categories" href="/collections/boite-alimentaire" accesskey="1">Boîte alimentaire</a></li>
<li><a class="title-sous-categories" href="/collections/couverts" accesskey="1">Couverts</a></li>
<li><a class="title-sous-categories" href="/collections/dejeuner" accesskey="1">Déjeuner</a></li>
<li><a class="title-sous-categories" href="/collections/petit-appareil" accesskey="1">Petit appareil</a></li>
<li><a class="title-sous-categories" href="/collections/produit-comestible" accesskey="1">Produit comestible</a></li>
<li><a class="title-sous-categories" href="/collections/ustensile-accessoire" accesskey="1">Ustensile/accessoire</a></li>
<li><a class="title-sous-categories" href="/collections/vaisselle" accesskey="1">Vaisselle</a></li>
<li><a class="title-sous-categories" href="/collections/vaisselle-enfant" accesskey="1">Vaisselle enfant</a></li>
<li><a class="title-sous-categories" href="/collections/verre" accesskey="1">Verre</a></li>
<li class="tiret">-</li>
<li><a href="/collections/decoration" class="title-categories" accesskey="1">Décoration</a></li>
<li><a class="title-sous-categories" href="/collections/miroir-deco-murale" accesskey="1">Miroir/Déco murale</a></li>
<li><a class="title-sous-categories" href="/collections/bougie" accesskey="1">Bougie</a></li>
<li><a class="title-sous-categories" href="/collections/deco-lumineuse" accesskey="1">Déco lumineuse</a></li>
<li><a class="title-sous-categories" href="/collections/objet-decoratif" accesskey="1">Objet décoratif</a></li>
<li><a class="title-sous-categories" href="/collections/photophore-diffuseur" accesskey="1">Photophore/diffuseur</a></li>
<li><a class="title-sous-categories" href="/collections/rangement" accesskey="1">Rangement</a></li>
<li class="tiret">-</li>
<li><a class="title-categories" href="/collections/mobilier-luminaire" accesskey="1">Mobilier/Luminaire</a></li>
<li><a class="title-sous-categories" href="/collections/chaise-fauteuil" accesskey="1">Chaise/fauteuil</a></li>
<li><a class="title-sous-categories" href="/collections/literie" accesskey="1">Literie</a></li>
<li><a class="title-sous-categories" href="/collections/luminaire" accesskey="1">Luminaire</a></li>
<li><a class="title-sous-categories" href="/collections/meuble-rangement" accesskey="1">Meuble/Rangement</a></li>
<li><a class="title-sous-categories" href="/collections/table-bout-canape" accesskey="1">Table/Bout de canapé</a></li>
<li class="tiret">-</li>
<li><a href="/collections/salle-de-bain" class="title-categories" accesskey="1">Salle de bain</a></li>
<li><a class="title-sous-categories" href="/collections/accessoire-de-bain" accesskey="1">Accessoire de bain</a></li>
<li><a class="title-sous-categories" href="/collections/corbeille-panier" accesskey="1">Corbeille/panier</a></li>
<li><a class="title-sous-categories" href="/collections/poubelle" accesskey="1">Poubelle</a></li>
<li><a class="title-sous-categories" href="/collections/rangement-sdb" accesskey="1">Rangement SDB</a></li>
<li><a class="title-sous-categories" href="/collections/wc" accesskey="1">WC</a></li>
<li class="tiret">-</li>
<li><a href="/collections/linge-textile" class="title-categories" accesskey="1">Linge/Textile</a></li>
<li><a class="title-sous-categories" href="/collections/coussin" accesskey="1">Coussin</a></li>
<li><a class="title-sous-categories" href="/collections/linge-de-bain" accesskey="1">Linge de bain</a></li>
<li><a class="title-sous-categories" href="/collections/linge-de-table" accesskey="1">Linge de table</a></li>
<li class="tiret">-</li>
<li><a class="title-categories" href="/collections/bagage" accesskey="1">Bagage</a></li>
<li><a class="title-sous-categories" href="/collections/pochette-trousse" accesskey="1">Pochette/trousse</a></li>
<li><a class="title-sous-categories" href="/collections/sacs" accesskey="1">Sacs</a></li>
<li><a class="title-sous-categories" href="/collections/valise" accesskey="1">Valise</a></li>
<li class="tiret">-</li>
<li><a href="/collections/gadget-fete" class="title-categories" accesskey="1">Gadgets/Fêtes</a></li>
<li><a class="title-sous-categories" href="/collections/accessoire" accesskey="1">Accessoire</a></li>
<li><a class="title-sous-categories" href="/collections/papeterie" accesskey="1">Papeterie</a></li>
<li><a class="title-sous-categories" href="/collections/jouets" accesskey="1">Jouets</a></li>
<li class="tiret">-</li>
<li><a href="/collections/entretien" class="title-categories" accesskey="1">Entretien</a></li>
<li class="tiret">-</li>
<li><a href="/collections/outdoor" class="title-categories" accesskey="1">Outdoor</a></li>
<li><a class="title-sous-categories" href="/collections/accessoire-exterieur" accesskey="1">Accessoire extérieur</a></li>
<li><a class="title-sous-categories" href="/collections/deco-exterieur" accesskey="1">Déco extérieure</a></li>
<li><a class="title-sous-categories" href="/collections/mobilier-exterieur" accesskey="1">Mobilier extérieur</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
{% paginate collection.products by 33 %}
<ul class="display-product">
{%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%}
{%- assign pageUrl = contentForQuerystring | split:'"pageurl":"' | last | split:'"' | first | split:'.myshopify.com' | last |
replace:'\/','/' |
replace:'%20',' ' |
replace:'\u0026','&'
-%}
{%- assign pageQuerystring = pageUrl | split:'?' | last -%}
{%- assign search = pageUrl | split:'=' | last -%}
{% if search contains "/collections/" %}
{% assign filter = "" %}
{% else %}
{% assign filter = search | downcase %}
{% endif %}
{%- for product in collection.products -%}
{% assign title = product.title | downcase %}
{% if title contains filter %}
<li><div class="magic">
<div class="canalize">
<h1 class="title-product-collection">{{ product.title }}</h1>
<div> {% if product.variants.first.sku %}
<p class="product-type"> SKU: {{ product.variants.first.sku }}</p>
{% else %}
<p></p>
{% endif %}
</div>
</div>
<div class="zoom">
<div class="image">
<div class="image-position">
<img class="design-image" src="{{ product.featured_image.src | img_url: '1024x' }}" alt="">
</div>
</div>
</div>
{% comment %}
Nombre de produits en stock
{% endcomment %}
<div class="display-flex-info-cinq">
<div class="display-flex-info">
{% if product.variants.first.inventory_management == "shopify" and product.variants.first.inventory_quantity > 0 %}
<p class="font-stock-product">Stock: </p>
<p class="font-stock-product-deux"> {{ product.variants.first.inventory_quantity }}</p>
{% else %}
<p class="font-stock-product-none">Stock:</p>
{% endif %}
</div>
<div class="display-flex-info">
<p class="font-price-product-deux"> Prix </p>
<p class="font-price-product">
<span class=""aria-hidden="true"></span>
{%- if product.price_varies -%}
<span class="">Starting at</span>
{{ product.price_min | money_without_trailing_zeros }}
<span aria-hidden="true">+</span>
{%- else -%}
{{ product.price | money_without_trailing_zeros }}
{%- endif -%}
</p>
</div>
</div>
<div class="div-design-info">
<p class="design-description">Informations:</p>
<div class="design-description-deux">
{{ product.description }}
</div>
</div>
<div class="">
<form class="margin-form" action="/cart/add" data-productid="{{product.id}}" method="post">
{% if product.available %}{% endif %}
{% if product.variants.size > 1 %}
{% else %}
<input type="hidden" name="id" data-productid="{{product.id}}" class="product-select" value="{{ product.variants[0].id }}" data-variant-title="{{ product.variants[0].title }}" />
{% endif %}
<div class="display-flex-info-deux">
<div class="product-options">
{% if product.variants.size !=1 %}
<select id="variant-select" name="id" class="product-select product-quantity-design">
{% for variant in product.variants %}
<option value="{{ variant.id }}">{{ variant.title }} </option>
{% endfor %}
</select>
{% else %}
{% for variant in product.variants %}
<input type="hidden" id="variant-select" name="id" value="{{ variant.id }}" />
{% endfor %}
{% endif %}
</div>
<div class="input-wrapper product-quantity quantity">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
{% assign step = false %}
{% for tag in product.tags %}
{% if tag contains 'C_' %}
<input class="inputQt" type="number" step={{tag | replace: "C_", ""}} id="Quantity-{{ section.id }}"
name="quantity" value="0" min="0" onkeydown="return false" pattern="[0-9]*"
class="product-form__input product-form__input--quantity" data-quantity-input>
{% assign step = true %}
{% break %}
{% endif %}
{% endfor %}
{% if step == false %}
<input class="inputQt" type="number" step="1" id="Quantity-{{ section.id }}"
name="quantity" value="0" min="0" onkeydown="return false" pattern="[0-9]*"
class="product-form__input product-form__input--quantity" data-quantity-input>
{% endif %}
<div class="quantity-nav">
<div class="quantity-button quantity-up">+</div>
<div class="quantity-button quantity-down">-</div>
</div>
</div>
<script>
//jQuery('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter('.quantity input');
jQuery('.quantity').each(function() {
var spinner = jQuery(this),
input = spinner.find('input[type="number"]'),
btnUp = spinner.find('.quantity-up'),
btnDown = spinner.find('.quantity-down'),
min = input.attr('min'),
max = input.attr('max'),
step = parseInt(input.attr('step'));
btnUp.click(function(e) {
e.stopPropagation()
e.stopImmediatePropagation()
console.log("Coucou Miss Sauer");
var oldValue = parseFloat(input.val());
if (oldValue >= max) {
var newVal = oldValue;
} else {
var newVal = oldValue + step;
}
spinner.find(".inputQt").val(newVal);
spinner.find(".inputQt").trigger("change");
});
btnDown.click(function(e) {
e.stopPropagation()
e.stopImmediatePropagation()
var oldValue = parseFloat(input.val());
if (oldValue <= min) {
var newVal = oldValue;
} else {
var newVal = oldValue - step;
}
spinner.find(".inputQt").val(newVal);
spinner.find(".inputQt").trigger("change");
});
});
</script>
</div>
<div class="add-to-cart">
{% if product.available %}
<div >
<button class="design-add-button position-button-add" type="submit" value="{{ 'products.product.add_to_cart' | t }}"> Ajouter </button>
<div class="add-to-cart-loader"></div>
</div>
{% capture cart_link %}
<a href="/cart">{{ 'products.product.cart_link' | t }}</a>
{% endcapture %}
{% capture continue_link %}
<a href="/collections/tous-les-produits">{{ 'products.product.continue_link' | t }}</a>
{% endcapture %}
{% capture checkout_link %}
<a href="/collections/tous-les-produits">{{ 'products.product.checkout_link' | t }}</a>
{% endcapture %}
{% capture product_item %}
<span class='added-product-name'></span>
{% endcapture %}
<p class="product-add-error-message"></p>
{% else %}
<input class="position-button-add" type="button" class="disabled" disabled="disabled" value="{{ 'products.product.sold_out' | t }}" />
{% endif %}
</div>
</form>
</div>
</div>
</li>
{% endif %}
{%- endfor -%}
</ul>
{%- if paginate.pages > 1 -%}
<nav role="navigation">
<ol class="pagination">
{%- if paginate.previous-%}
<li>
<a href="{{ paginate.previous.url }}">
<span aria-hidden="true"></span>
Page Précédente <span class="visuallyhidden"></span>
</a>
</li>
{%- else -%}
<li class="disabled design-add-button-six">
<span aria-hidden="true"></span>
Page Précédente <span class="visuallyhidden"></span>
</li>
{%- endif -%}
{%- for part in paginate.parts -%}
{%- if part.is_link -%}
<li>
<a href="{{ part.url }}">
<span class="visuallyhidden">page</span> {{ part.title }}
</a>
</li>
{%- else -%}
{%- if part.title == paginate.current_page -%}
<li class="active" aria-current="page">
<span class="visuallyhidden">page</span> {{ part.title }}
</li>
{%- else -%}
<li>
<span class="visuallyhidden">page</span> {{ part.title }}
</li>
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- if paginate.next -%}
<li>
<a class="design-add-button-six" href="{{ paginate.next.url }}">
Page Suivante <span class="visuallyhidden"></span>
<span aria-hidden="true"></span>
</a>
</li>
{%- else -%}
<li class="disabled">
Page Suivante <span class="visuallyhidden"></span>
<span aria-hidden="true"></span>
</li>
{%- endif -%}
</ol>
</nav>
{%- endif -%}
{%- endpaginate -%}
</div>
{% else %}
<div class="page-width">
<div class="grid">
<div class="space-between-content">
</div>
<div class="space-between-content">
</div>
<div class="grid__item medium-up--one-half medium-up--push-one-quarter">
<div class="form-message form-message--success hide" id="ResetSuccess" tabindex="-1">
{{ 'customer.recover_password.success' | t }}
</div>
<div id="CustomerLoginForm" class="form-vertical">
<h1 id="LoginHeading" class="text-center">{{ 'customer.login.title' | t }}</h1>
{% form 'customer_login', novalidate: 'novalidate' %}
{%- if form.errors -%}
<div class="form-message form-message--error">
<h2 class="h3 form-message__title " tabindex="-1" data-form-status>{{ 'contact.form.error_heading' | t }}</h2>
{{ form.errors | default_errors }}
</div>
{%- endif -%}
<label for="CustomerEmail">{{ 'customer.login.email' | t }}</label>
<input
type="email"
name="customer[email]"
id="CustomerEmail"
autocomplete="email"
autocorrect="off"
autocapitalize="off"
{%- if form.errors contains 'form' -%}
class="input--error"
aria-invalid="true"
{%- endif -%}
>
{% if form.password_needed %}
<label for="CustomerPassword">{{ 'customer.login.password' | t }}</label>
<input
type="password"
value=""
name="customer[password]"
id="CustomerPassword"
{%- if form.errors contains 'form' -%}
class="input--error"
aria-invalid="true"
{%- endif -%}
>
{% endif %}
<div class="margin-customer-info">
{% if form.password_needed %}
{% endif %}
<input class="design-button-input" type="submit" value="{{ 'customer.login.sign_in' | t }}">
<input type="hidden" name="checkout_url" value="/collections/tous-les-produits">
<p> Vous n'avez pas encore de compte?</p>
<a class="btn-contact-account" href="/#contact">Contactez-nous</a>
</div>
{% endform %}
</div>
{% comment %}
If accounts are set as optional, the following will be shown as an option
during checkout, not on the default /login page.
{% endcomment %}
{% if shop.checkout.guest_login %}
<div class="text-center">
<hr class="hr--invisible">
<h2>{{ 'customer.login.guest_title' | t }}</h2>
{% form 'guest_login' %}
<input type="submit" class="btn" value="{{ 'customer.login.guest_continue' | t }}">
{% endform %}
</div>
{% endif %}
</div>
</div>
</div>
{% endif %}
{% endif %}
{% schema %}
{
"name": "Sidebar",
"settings": [
{
"type": "link_list",
"id": "main_menu_link_list",
"label": "Menu",
"default": "main-menu"
}
]
}
{% endschema %}