Personalized checkout and custom promotions with Shopify Scripts
hello I have a problem with my code, the button "see more" is supposed to show the entire descriptions, and the button, "see less" is supposed to show the text at 20%
{% comment %} Section de description de la collection avec boutons "Voir plus" et "Voir moins" {% endcomment %} <div class="collection-description"> <div class="description-wrapper"> {% if collection.description.size > 200 %} <div class="description-text{% unless collection.description_expanded %} collapsed{% endunless %}"> {% if collection.description_expanded %} {{ collection.description }} {% else %} {{ collection.description | truncatewords: 50 }} {% endif %} </div> <div class="button-wrapper"> <button class="toggle-description-btn"> {% if collection.description_expanded %} Voir moins {% else %} Voir plus {% endif %} </button> </div> {% else %} <div class="description-text"> {{ collection.description }} </div> {% endif %} </div> </div> {% schema %} { "name": "Description boutons", "settings": [ { "type": "range", "id": "text_margin", "label": "Marge du texte (en pixels)", "default": 20, "min": 0, "max": 50, "step": 5 }, { "type": "color", "id": "button_color", "label": "Couleur du bouton", "default": "#333333" }, { "type": "range", "id": "button_size", "label": "Taille du bouton (en pixels)", "default": 14, "min": 10, "max": 20, "step": 1 }, { "type": "range", "id": "button_border_radius", "label": "Arrondi du bouton (en pixels)", "default": 5, "min": 0, "max": 10, "step": 1 }, { "type": "select", "id": "button_alignment", "label": "Alignement du bouton", "default": "left", "options": [ { "value": "left", "label": "Gauche" }, { "value": "center", "label": "Centre" }, { "value": "right", "label": "Droite" } ] } ], "presets": [ { "category": "Description", "name": "Description de la collection avec boutons", "settings": { "text_margin": 20, "button_color": "#333333", "button_size": 14, "button_border_radius": 5, "button_alignment": "left" } } ] } {% endschema %} <style> .collection-description { margin-bottom: 30px; } .description-wrapper { margin: 0 auto; padding: 0 {{ section.settings.text_margin }}px; max-width: 800px; text-align: justify; } .description-text { margin-bottom: 20px; overflow: hidden; transition: height 0.3s ease; } .description-text.collapsed { height: auto; } .button-wrapper { text-align: {{ section.settings.button_alignment }}; } .toggle-description-btn { background-color: {{ section.settings.button_color }}; color: #fff; border: none; padding: 8px {{ section.settings.button_size }}px; border-radius: {{ section.settings.button_border_radius }}px; cursor: pointer; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.toggle-description-btn').on('click', function() { var $descriptionText = $(this).closest('.description-wrapper').find('.description-text'); $descriptionText.toggleClass('collapsed'); if ($descriptionText.hasClass('collapsed')) { $(this).text('Voir plus'); } else { $(this).text('Voir moins'); } }); }); </script>
help plz
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024