@o2vend/theme-cli 1.0.32

package/test-theme/snippets/rating.liquid

@@ -0,0 +1,85 @@
+{% comment %}
+  Product Rating Display Snippet
+  
+  Displays product rating with stars and review count.
+  Usage: {% render 'snippets/rating', product: product %}
+{% endcomment %}
+
+{% liquid
+  assign product = product | default: null
+  assign rating = rating | default: product.rating | default: product.averageRating | default: 0
+  assign review_count = review_count | default: product.reviewCount | default: product.reviewsCount | default: 0
+  assign show_count = show_count | default: true
+  assign max_rating = max_rating | default: 5
+  
+  if rating == null or rating == empty
+    assign rating = 0
+  endif
+  
+  assign rating_float = rating | times: 1.0
+  assign full_stars = rating_float | floor
+  assign has_half_star = rating_float | modulo: 1 | times: 10 | round | divided_by: 10.0
+  assign empty_stars = max_rating | minus: full_stars
+  if has_half_star > 0
+    assign empty_stars = empty_stars | minus: 1
+  endif
+%}
+
+<div class="rating" data-rating="{{ rating }}" aria-label="Rating: {{ rating }} out of {{ max_rating }}">
+  <div class="rating-stars" role="img" aria-label="{{ rating }} out of {{ max_rating }} stars">
+    {% for i in (1..full_stars) %}
+      <span class="rating-star rating-star-full" aria-hidden="true">★</span>
+    {% endfor %}
+    
+    {% if has_half_star > 0 %}
+      <span class="rating-star rating-star-half" aria-hidden="true">★</span>
+    {% endif %}
+    
+    {% for i in (1..empty_stars) %}
+      <span class="rating-star rating-star-empty" aria-hidden="true">☆</span>
+    {% endfor %}
+  </div>
+  
+  {% if show_count and review_count > 0 %}
+    <span class="rating-count" data-rating-count>
+      ({{ review_count }} {{ 'product.reviews' | t | default: 'review' | pluralize: review_count }})
+    </span>
+  {% endif %}
+</div>
+
+<style>
+  .rating {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .rating-stars {
+    display: inline-flex;
+    gap: 0.125rem;
+    font-size: 1rem;
+    line-height: 1;
+  }
+
+  .rating-star {
+    color: #fbbf24;
+    font-size: 1rem;
+  }
+
+  .rating-star-empty {
+    color: #e5e7eb;
+  }
+
+  .rating-star-half {
+    background: linear-gradient(90deg, #fbbf24 50%, #e5e7eb 50%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .rating-count {
+    font-size: 0.875rem;
+    color: {{ settings.color_text_light }};
+  }
+</style>
+

package/test-theme/snippets/skeleton-collection-grid.liquid

@@ -0,0 +1,114 @@
+{% comment %}
+  Skeleton Loader for Collection/Category Grid
+  Parameters:
+    - count: Number of skeleton cards to display (default: 6)
+{% endcomment %}
+
+{% assign skeletonCount = count | default: 6 %}
+
+<div class="collections-grid skeleton-grid">
+  {% if skeletonCount >= 1 %}
+    <div class="collection-card skeleton-card">
+      <div class="collection-image-container skeleton-image">
+        <div class="skeleton-shimmer"></div>
+      </div>
+      <div class="collection-content">
+        <div class="skeleton-text skeleton-title"></div>
+        <div class="skeleton-text skeleton-description"></div>
+        <div class="skeleton-text skeleton-meta"></div>
+      </div>
+    </div>
+  {% endif %}
+  {% if skeletonCount >= 2 %}
+    <div class="collection-card skeleton-card">
+      <div class="collection-image-container skeleton-image">
+        <div class="skeleton-shimmer"></div>
+      </div>
+      <div class="collection-content">
+        <div class="skeleton-text skeleton-title"></div>
+        <div class="skeleton-text skeleton-description"></div>
+        <div class="skeleton-text skeleton-meta"></div>
+      </div>
+    </div>
+  {% endif %}
+  {% if skeletonCount >= 3 %}
+    <div class="collection-card skeleton-card">
+      <div class="collection-image-container skeleton-image">
+        <div class="skeleton-shimmer"></div>
+      </div>
+      <div class="collection-content">
+        <div class="skeleton-text skeleton-title"></div>
+        <div class="skeleton-text skeleton-description"></div>
+        <div class="skeleton-text skeleton-meta"></div>
+      </div>
+    </div>
+  {% endif %}
+  {% if skeletonCount >= 4 %}
+    <div class="collection-card skeleton-card">
+      <div class="collection-image-container skeleton-image">
+        <div class="skeleton-shimmer"></div>
+      </div>
+      <div class="collection-content">
+        <div class="skeleton-text skeleton-title"></div>
+        <div class="skeleton-text skeleton-description"></div>
+        <div class="skeleton-text skeleton-meta"></div>
+      </div>
+    </div>
+  {% endif %}
+  {% if skeletonCount >= 5 %}
+    <div class="collection-card skeleton-card">
+      <div class="collection-image-container skeleton-image">
+        <div class="skeleton-shimmer"></div>
+      </div>
+      <div class="collection-content">
+        <div class="skeleton-text skeleton-title"></div>
+        <div class="skeleton-text skeleton-description"></div>
+        <div class="skeleton-text skeleton-meta"></div>
+      </div>
+    </div>
+  {% endif %}
+  {% if skeletonCount >= 6 %}
+    <div class="collection-card skeleton-card">
+      <div class="collection-image-container skeleton-image">
+        <div class="skeleton-shimmer"></div>
+      </div>
+      <div class="collection-content">
+        <div class="skeleton-text skeleton-title"></div>
+        <div class="skeleton-text skeleton-description"></div>
+        <div class="skeleton-text skeleton-meta"></div>
+      </div>
+    </div>
+  {% endif %}
+</div>
+
+<style>
+.skeleton-card .collection-image-container {
+  background: #f0f0f0;
+  position: relative;
+  overflow: hidden;
+  aspect-ratio: 1;
+  border-radius: 12px;
+}
+
+.skeleton-card .collection-content {
+  padding: 1rem 0;
+}
+
+.skeleton-card .skeleton-title {
+  width: 80%;
+  height: 20px;
+  margin-bottom: 8px;
+}
+
+.skeleton-card .skeleton-description {
+  width: 100%;
+  height: 14px;
+  margin-bottom: 6px;
+}
+
+.skeleton-card .skeleton-meta {
+  width: 50%;
+  height: 12px;
+}
+</style>
+

package/test-theme/snippets/skeleton-product-card.liquid

@@ -0,0 +1,124 @@
+{% comment %}
+  Skeleton Loader for Product Card
+  Shows animated placeholder while product data loads
+{% endcomment %}
+
+<div class="product-card skeleton-card">
+  <div class="product-card-image skeleton-image">
+    <div class="skeleton-shimmer"></div>
+  </div>
+  <div class="product-card-content">
+    <div class="skeleton-text skeleton-vendor"></div>
+    <div class="skeleton-text skeleton-title"></div>
+    <div class="skeleton-text skeleton-price"></div>
+    <div class="skeleton-button"></div>
+  </div>
+</div>
+
+<style>
+.skeleton-card {
+  pointer-events: none;
+}
+
+.skeleton-image {
+  background: #f0f0f0;
+  position: relative;
+  overflow: hidden;
+  border-radius: 12px;
+  aspect-ratio: 1;
+}
+
+.skeleton-shimmer {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  height: 100%;
+  width: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.6) 50%,
+    transparent 100%
+  );
+  animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+.skeleton-text {
+  height: 16px;
+  background: #f0f0f0;
+  border-radius: 4px;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+
+.skeleton-text::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  height: 100%;
+  width: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.6) 50%,
+    transparent 100%
+  );
+  animation: shimmer 2s infinite;
+}
+
+.skeleton-vendor {
+  width: 60%;
+  height: 12px;
+  margin-bottom: 6px;
+}
+
+.skeleton-title {
+  width: 90%;
+  height: 18px;
+  margin-bottom: 8px;
+}
+
+.skeleton-price {
+  width: 50%;
+  height: 20px;
+  margin-bottom: 12px;
+}
+
+.skeleton-button {
+  width: 100%;
+  height: 44px;
+  background: #f0f0f0;
+  border-radius: 8px;
+  position: relative;
+  overflow: hidden;
+  margin-top: 8px;
+}
+
+.skeleton-button::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  height: 100%;
+  width: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.6) 50%,
+    transparent 100%
+  );
+  animation: shimmer 2s infinite;
+}
+</style>
+

package/test-theme/snippets/skeleton-product-grid.liquid

@@ -0,0 +1,34 @@
+{% comment %}
+  Skeleton Loader for Product Grid
+  Parameters:
+    - count: Number of skeleton cards to display (default: 4)
+{% endcomment %}
+
+{% assign skeletonCount = count | default: 4 %}
+
+<div class="products-grid skeleton-grid">
+  {% if skeletonCount >= 1 %}{% include 'snippets/skeleton-product-card' %}{% endif %}
+  {% if skeletonCount >= 2 %}{% include 'snippets/skeleton-product-card' %}{% endif %}
+  {% if skeletonCount >= 3 %}{% include 'snippets/skeleton-product-card' %}{% endif %}
+  {% if skeletonCount >= 4 %}{% include 'snippets/skeleton-product-card' %}{% endif %}
+  {% if skeletonCount >= 5 %}{% include 'snippets/skeleton-product-card' %}{% endif %}
+  {% if skeletonCount >= 6 %}{% include 'snippets/skeleton-product-card' %}{% endif %}
+  {% if skeletonCount >= 7 %}{% include 'snippets/skeleton-product-card' %}{% endif %}
+  {% if skeletonCount >= 8 %}{% include 'snippets/skeleton-product-card' %}{% endif %}
+</div>
+
+<style>
+.skeleton-grid {
+  animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+</style>
+

package/test-theme/snippets/social-sharing.liquid

@@ -0,0 +1,185 @@
+{% comment %}
+  Social Sharing Snippet
+  
+  Displays social sharing buttons for products, articles, etc.
+  Usage: {% render 'snippets/social-sharing', url: product.url, title: product.title %}
+{% endcomment %}
+
+{% liquid
+  assign url = url | default: request.url
+  assign title = title | default: page.title | default: product.title | default: shop.name
+  assign description = description | default: page.description | default: product.description | default: shop.description
+  assign image = image | default: product.image | default: page.image
+  
+  # Encode URL for sharing
+  assign encoded_url = url | url_encode
+  assign encoded_title = title | url_encode
+  assign encoded_description = description | truncate: 200 | url_encode
+%}
+
+<div class="social-sharing" data-social-sharing>
+  <span class="social-sharing-label">{{ 'general.social.share' | t | default: 'Share' }}</span>
+  <div class="social-sharing-buttons">
+    <a href="https://www.facebook.com/sharer/sharer.php?u={{ encoded_url }}" 
+       class="social-sharing-button social-sharing-button--facebook"
+       target="_blank"
+       rel="noopener noreferrer"
+       aria-label="Share on Facebook">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+      </svg>
+      <span>Facebook</span>
+    </a>
+    
+    <a href="https://twitter.com/intent/tweet?url={{ encoded_url }}&text={{ encoded_title }}" 
+       class="social-sharing-button social-sharing-button--twitter"
+       target="_blank"
+       rel="noopener noreferrer"
+       aria-label="Share on Twitter">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
+      </svg>
+      <span>Twitter</span>
+    </a>
+    
+    <a href="https://pinterest.com/pin/create/button/?url={{ encoded_url }}&description={{ encoded_title }}" 
+       class="social-sharing-button social-sharing-button--pinterest"
+       target="_blank"
+       rel="noopener noreferrer"
+       aria-label="Share on Pinterest">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.746-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24.009c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001 12.017.001z"/>
+      </svg>
+      <span>Pinterest</span>
+    </a>
+    
+    <a href="mailto:?subject={{ encoded_title }}&body={{ encoded_url }}" 
+       class="social-sharing-button social-sharing-button--email"
+       aria-label="Share via Email">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+        <polyline points="22,6 12,13 2,6"></polyline>
+      </svg>
+      <span>Email</span>
+    </a>
+    
+    <button class="social-sharing-button social-sharing-button--copy" 
+            data-copy-url="{{ url }}"
+            aria-label="Copy link">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+      </svg>
+      <span>Copy Link</span>
+    </button>
+  </div>
+</div>
+
+<style>
+  .social-sharing {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+
+  .social-sharing-label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: {{ settings.color_text }};
+  }
+
+  .social-sharing-buttons {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .social-sharing-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    border: 1px solid #e5e7eb;
+    background: white;
+    color: {{ settings.color_text }};
+    text-decoration: none;
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    transition: all 0.2s ease;
+    cursor: pointer;
+  }
+
+  .social-sharing-button:hover {
+    background: #f9fafb;
+    border-color: {{ settings.color_primary }};
+    color: {{ settings.color_primary }};
+  }
+
+  .social-sharing-button--facebook:hover {
+    background: #1877f2;
+    border-color: #1877f2;
+    color: white;
+  }
+
+  .social-sharing-button--twitter:hover {
+    background: #1da1f2;
+    border-color: #1da1f2;
+    color: white;
+  }
+
+  .social-sharing-button--pinterest:hover {
+    background: #bd081c;
+    border-color: #bd081c;
+    color: white;
+  }
+
+  .social-sharing-button--email:hover {
+    background: {{ settings.color_primary }};
+    border-color: {{ settings.color_primary }};
+    color: white;
+  }
+
+  .social-sharing-button svg {
+    flex-shrink: 0;
+  }
+
+  @media (max-width: 480px) {
+    .social-sharing {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .social-sharing-button span {
+      display: none;
+    }
+
+    .social-sharing-button {
+      padding: 0.5rem;
+      width: 40px;
+      height: 40px;
+      justify-content: center;
+    }
+  }
+</style>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const copyButton = document.querySelector('[data-copy-url]');
+    if (copyButton) {
+      copyButton.addEventListener('click', function() {
+        const url = this.dataset.copyUrl;
+        navigator.clipboard.writeText(url).then(() => {
+          const originalText = this.querySelector('span').textContent;
+          this.querySelector('span').textContent = 'Copied!';
+          setTimeout(() => {
+            this.querySelector('span').textContent = originalText;
+          }, 2000);
+        }).catch(err => {
+          console.error('Failed to copy:', err);
+        });
+      });
+    }
+  });
+</script>
+