### Development Setup Bash Script

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/README.md

Instructions for cloning the repository and setting up the Webasyst development environment. This script guides users through the initial steps of obtaining the project code and preparing it for local development.

```bash
git clone https://github.com/your-repo/waboot-theme.git
cd waboot-theme
# Install in Webasyst development environment
# Make changes and test
```

--------------------------------

### Install Waboot Theme

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/theme-documentation.md

Steps to install the Waboot theme into your Webasyst installation, including setting file permissions.

```bash
chmod -R 755 wa-apps/shop/themes/waboot/
```

--------------------------------

### JavaScript: Webasyst Cart API Integration

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/migration-guide.md

Provides a JavaScript example for interacting with the Webasyst shop API to add products to the cart. It includes a check to ensure the `wa_shop` object is available before attempting to use its methods, preventing errors.

```javascript
// Check if shop API is available
if (typeof wa_shop !== 'undefined') {
    // Use Webasyst cart API
    wa_shop.cart.add(product_id, quantity);
}
```

--------------------------------

### jQuery Event Handling Example

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/migration-guide.md

Illustrates a typical WordPress/jQuery approach for handling user interactions like hover effects on product cards and click events for adding items to a cart, often involving AJAX calls.

```javascript
// WordPress/jQuery approach
$(document).ready(function() {
    $('.product-card').hover(function() {
        $(this).addClass('hover-effect');
    });
    
    $('.add-to-cart').click(function() {
        var productId = $(this).data('product-id');
        // AJAX call to add to cart
    });
});
```

--------------------------------

### WordPress Theme Structure

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/migration-guide.md

Illustrates the typical directory structure of a WordPress theme, highlighting key files and folders like functions.php, style.css, and template files.

```text
WordPress Theme Structure:
├── functions.php (theme functions)
├── style.css (main stylesheet)
├── index.php (homepage)
├── header.php (header template)
├── footer.php (footer template)
├── single-product.php (product detail)
├── archive-product.php (product listing)
├── js/ (JavaScript files)
├── css/ (stylesheets)
└── assets/ (images, fonts)
```

--------------------------------

### Webasyst Template Function Equivalents

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/migration-guide.md

Maps common WordPress template functions to their corresponding Webasyst template syntax and equivalents, facilitating theme migration.

```webasyst
Template Functions:
- get_header(): `{include file="header.html"}`
- get_footer(): `{include file="footer.html"}`
- wp_head(): `{$wa->shop->header()}`
- wp_footer(): `{$wa->shop->footer()}`
- the_title(): `{$product.name\|escape}`
- the_content(): `{$product.description}`
- get_permalink(): `{$wa_app_url}product/{$product.url}/`
- has_post_thumbnail(): `{if $product.image}`
- the_post_thumbnail(): `<img src="{$product.image.url_crop}">`
```

```webasyst
Navigation Functions:
- wp_nav_menu(): `{wa_navigation}`
- get_search_form(): `{include file="search.html"}`
- paginate_links(): Custom pagination logic
- next_post_link(): `{$next_product.url}`
- previous_post_link(): `{$prev_product.url}`
```

```webasyst
E-commerce Functions:
- wc_get_products(): `{$products.products}`
- wc_get_product(): `{$product}`
- wc_price(): `{wa_currency($product.price)}`
- woocommerce_breadcrumb(): Custom breadcrumb template
- woocommerce_output_product_data_tabs(): Custom tab implementation
- wc_get_cart_url(): `{$wa_app_url}cart/`
- wc_get_checkout_url(): `{$wa_app_url}checkout/`
```

```webasyst
Data Access Functions:
- get_option(): `{$wa->shop->settings()}`
- get_theme_mod(): `{$wa->theme()->settings()}`
- wp_get_current_user(): `{$wa->getUser()}`
- is_user_logged_in(): `{$wa->getUser()->isAuth()}`
- get_cart_contents(): `{$wa->getStorage('shop/cart')}`
```

--------------------------------

### Waboot Custom JavaScript Example

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/theme-documentation.md

Example JavaScript code demonstrating how to add custom interactions using Alpine.js stores within the Waboot theme.

```javascript
// Example: Custom product interactions
document.addEventListener('alpine:init', () => {
    Alpine.store('customStore', {
        // Your custom Alpine.js store
    });
});
```

--------------------------------

### Webasyst Waboot Theme Structure

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/migration-guide.md

Details the directory structure for the Webasyst Waboot theme, showcasing its configuration files, template organization, and asset management approach.

```text
Webasyst Theme Structure:
├── theme.xml (theme configuration)
├── templates/
│   ├── layout.html (main layout)
│   ├── header.html (header template)
│   ├── footer.html (footer template)
│   ├── home.html (homepage)
│   ├── category.html (product listing)
│   └── product.html (product detail)
├── css/
│   ├── waboot.css (main stylesheet)
│   └── vendor/ (Bootstrap, AOS)
├── js/
│   ├── waboot.js (main JavaScript)
│   └── vendor/ (Alpine.js, Bootstrap)
├── images/ (theme images)
└── fonts/ (local fonts)
```

--------------------------------

### JavaScript Product Interactions

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/theme-documentation.md

Shows examples of performing common product-related actions using JavaScript, such as adding items to the cart with specific options or displaying product quick view modals with configurable settings.

```javascript
// Add to cart with custom options
WabootTheme.addToCart({
    productId: 123,
    quantity: 2,
    variant: 'red-large',
    callback: function(response) {
        // Handle response
    }
});

// Quick view modal
WabootTheme.quickView({
    productId: 123,
    showVariants: true,
    showDescription: true
});
```

--------------------------------

### HTML: JavaScript Loading Order Troubleshooting

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/migration-guide.md

Illustrates the correct HTML for including JavaScript files, specifically highlighting the use of the `defer` attribute for libraries like Alpine.js. Proper script loading order prevents runtime errors and ensures functionality.

```html
<!-- Alpine.js must be loaded with defer -->
<script src="{$wa_theme_url}js/vendor/alpine.min.js" defer></script>
```

--------------------------------

### Responsive Design Media Queries

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/migration-guide.md

Demonstrates a mobile-first responsive design strategy using Bootstrap 5 grid system and custom media queries. It shows how font sizes are adjusted for different screen sizes, from mobile to desktop.

```css
/* Mobile first */
.waboot__hero-title {
    font-size: 2.5rem;
}

/* Tablet */
@media (min-width: 768px) {
    .waboot__hero-title {
        font-size: 3rem;
    }
}

/* Desktop */
@media (min-width: 1200px) {
    .waboot__hero-title {
        font-size: 4rem;
    }
}
```

--------------------------------

### HTML Image Optimization: Responsive and Lazy Loading

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/migration-guide.md

Illustrates HTML for optimizing image loading using `srcset` and `sizes` attributes for responsive images, and `loading="lazy"` for deferred loading. This improves page load times and user experience by serving appropriately sized images and loading them only when visible.

```html
<!-- Responsive images -->
<img src="{$product.image.url_thumb}" 
     srcset="{$product.image.url_thumb} 300w,
             {$product.image.url_crop} 600w,
             {$product.image.url_original} 1200w"
     sizes="(max-width: 768px) 300px,
            (max-width: 1200px) 600px,
            1200px"
     loading="lazy"
     alt="{$product.name|escape}">
```

--------------------------------

### Install Waboot Theme via Git and Copy

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/README.md

Steps to clone the Waboot theme repository and copy it into the Webasyst application directory, including setting appropriate file permissions for the theme files.

```bash
git clone https://github.com/your-repo/waboot-theme.git
cd waboot-theme
cp -r waboot/ /path/to/webasyst/wa-apps/shop/themes/
chmod -R 755 /path/to/webasyst/wa-apps/shop/themes/waboot/
```

--------------------------------

### Alpine.js Global Store for State Management

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/migration-guide.md

Demonstrates the implementation of a global store using Alpine.js for managing application-wide state, such as cart items and wishlist items, and includes methods for manipulating this state.

```javascript
// Global state management
Alpine.store('waboot', {
    cartItems: [],
    wishlistItems: [],
    
    addToCart(product) {
        // Add to cart logic
    },
    
    toggleWishlist(product) {
        // Wishlist toggle logic
    }
});
```

--------------------------------

### Waboot Custom CSS Example

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/theme-documentation.md

Example CSS code for customizing Waboot theme variables and elements, such as primary colors and hero section backgrounds.

```css
/* Example customizations */
:root {
    --waboot-primary: #your-brand-color;
    --waboot-secondary: #your-secondary-color;
}

.waboot__hero {
    background-image: url('your-hero-image.jpg');
}
```

--------------------------------

### CSS Optimization: Efficient Selectors and Animations

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/migration-guide.md

Demonstrates CSS best practices for performance, focusing on using efficient selectors and optimizing animations with properties like 'will-change'. This helps in faster rendering and smoother visual effects.

```css
/* Use efficient selectors */
.waboot__nav-link { /* Good: class selector */ }
nav ul li a { /* Avoid: complex descendant selectors */ }

/* Optimize animations */
.waboot__product-card {
    transition: transform 0.3s ease;
    will-change: transform; /* Optimize for animations */
}
```

--------------------------------

### Smarty: Template Loading Troubleshooting

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/migration-guide.md

Shows the correct Smarty syntax for including template files and provides a reminder to check file existence within the designated directory. This is crucial for ensuring all parts of a webpage load correctly.

```smarty
{* Correct include syntax *}
{include file="header.html"}

{* Check file exists in templates/ directory *}
```

--------------------------------

### HTML: CSS Asset Path Troubleshooting

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/migration-guide.md

Demonstrates the correct HTML structure for linking CSS files, emphasizing the use of theme variables for asset URLs. Verifying these paths is essential for styles to be applied correctly to the webpage.

```html
<!-- Correct asset URL -->
<link rel="stylesheet" href="{$wa_theme_url}css/waboot.css">
```

--------------------------------

### Alpine.js Event Handling and Store Usage

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/migration-guide.md

Shows how Alpine.js replaces jQuery for frontend interactivity, managing element states like hover effects directly in the HTML and triggering store actions for operations such as adding to cart.

```javascript
<div class="product-card" 
     @mouseenter="$el.classList.add('hover-effect')"
     @mouseleave="$el.classList.remove('hover-effect')">
    
    <button class="add-to-cart" 
            @click="$store.waboot.addToCart(product)"
            x-data="{ product: {$product|@json_encode} }">
        Add to Cart
    </button>
</div>
```

--------------------------------

### Smarty: Product Data Debugging and Conditional Display

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/migration-guide.md

Shows how to debug product data in Smarty using `debug_print_var` and how to conditionally display product information based on its existence. This helps in diagnosing issues where product variables might be empty.

```smarty
{* Debug product data *}
{$product|@debug_print_var}

{* Check if product exists *}
{if $product}
    <h1>{$product.name|escape}</h1>
{else}
    <p>Product not found</p>
{/if}
```

--------------------------------

### Smarty Layout Template Structure

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/migration-guide.md

Demonstrates the structure of the Waboot layout.html template, which combines header and footer functionality similar to WordPress. It includes meta tags, title, local CSS and JavaScript asset inclusion, and content rendering using Smarty syntax.

```smarty
{* Waboot layout.html structure *}
<!DOCTYPE html>
<html lang="{$locale}">
<head>
    {* Meta tags and title *}
    <meta charset="utf-8">
    <title>{$wa_title|escape}</title>
    
    {* Local CSS assets *}
    <link rel="stylesheet" href="{$wa_theme_url}css/vendor/bootstrap.min.css">
    <link rel="stylesheet" href="{$wa_theme_url}css/vendor/aos.min.css">
    <link rel="stylesheet" href="{$wa_theme_url}css/waboot.css">
</head>
<body>
    {include file="header.html"}
    
    <main role="main">
        {$content}
    </main>
    
    {include file="footer.html"}
    
    {* Local JavaScript assets *}
    <script src="{$wa_theme_url}js/vendor/bootstrap.bundle.min.js"></script>
    <script src="{$wa_theme_url}js/vendor/alpine.min.js" defer></script>
    <script src="{$wa_theme_url}js/vendor/aos.min.js"></script>
    <script src="{$wa_theme_url}js/waboot.js"></script>
</body>
</html>
```

--------------------------------

### PHP: Enabling Webasyst Debug Mode

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/migration-guide.md

Shows how to enable debug mode in Webasyst by setting the `debug` configuration option to `true` in the `wa-config/config.php` file. This is useful for troubleshooting application behavior.

```php
// In wa-config/config.php
$config['debug'] = true;
```

--------------------------------

### CSS Custom Properties for Theming

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/migration-guide.md

Showcases the use of CSS Custom Properties (variables) for defining themeable values such as primary and secondary colors, border-radius, and transition durations. This facilitates easier style management and theming.

```css
:root {
    --waboot-primary: #0d6efd;
    --waboot-secondary: #6c757d;
    --waboot-border-radius: 0.375rem;
    --waboot-transition: all 0.15s ease-in-out;
}
```

--------------------------------

### CSS BEM Naming Convention

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/migration-guide.md

Illustrates the Block, Element, Modifier (BEM) methodology for structuring CSS class names. This approach promotes modularity, readability, and maintainability by defining clear relationships between components and their states.

```css
/* Block: Independent component */
.waboot__product-card { }

/* Element: Part of a block */
.waboot__product-card__image { }
.waboot__product-card__title { }
.waboot__product-card__price { }

/* Modifier: Variation of block or element */
.waboot__product-card--featured { }
.waboot__product-card__title--large { }
```

--------------------------------

### JavaScript Optimization: Event Delegation and Debouncing

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/migration-guide.md

Provides JavaScript techniques for performance improvement, including event delegation to reduce listener overhead and debouncing to limit the rate at which a function can be called. These methods enhance responsiveness, especially with frequent user interactions.

```javascript
// Use event delegation
document.addEventListener('click', function(e) {
    if (e.target.matches('.add-to-cart')) {
        // Handle add to cart
    }
});

// Debounce search inputs
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}
```

--------------------------------

### Additional Footer Scripts

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/waboot/templates/layout.html

Includes any additional JavaScript files or code injected by installed applications or plugins into the footer of the page.

```JavaScript
{$wa->footer()}
```

--------------------------------

### Git Version Control Commands

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/theme-documentation.md

A collection of essential Git commands for managing a project's version control. It covers initializing a repository, staging and committing changes, and creating new branches for feature development.

```bash
# Initialize git repository
git init
git add .
git commit -m "Initial Waboot theme commit"

# Track changes
git add -A
git commit -m "Update product template styling"

# Create branches for major changes
git checkout -b feature/new-homepage-design
```

--------------------------------

### Custom CSS for Brand Colors and Hero Background

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/README.md

Provides examples of how to override default theme styles using custom CSS, specifically for setting brand colors and a custom hero background image.

```css
/* Brand colors */
:root {
    --waboot-primary: #your-brand-color;
}

/* Custom hero background */
.waboot__hero {
    background-image: url('your-image.jpg');
}
```

--------------------------------

### Product Schema Markup

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/waboot/templates/layout.html

Generates JSON-LD structured data for product pages, adhering to schema.org standards. It includes product name, description, image, brand, price, currency, and availability, enhancing SEO.

```APIDOC
Product Schema Markup:
  Context: "https://schema.org/"
  Type: "Product"
  Properties:
    name: "{$product.name|escape}"
    description: "{$product.summary|escape}"
    image: "{if $product.image}{$product.image.url_big}{/if}"
    brand:
      Type: "Brand"
      Properties:
        name: "{$wa->shop->settings('name')}"
    offers:
      Type: "Offer"
      Properties:
        price: "{$product.price}"
        priceCurrency: "{$wa->shop->currency()}"
        availability: "{if $product.count > 0}https://schema.org/InStock{else}https://schema.org/OutOfStock{/if}"
```

--------------------------------

### Responsive Breakpoints and Media Query Usage

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/theme-documentation.md

Defines responsive breakpoints using a Sass map, following Bootstrap 5 conventions. Includes an example of how to use these breakpoints within media queries to apply styles conditionally based on screen width.

```css
/* Bootstrap 5 breakpoints */
$breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px
);

/* Usage */
@media (min-width: 768px) {
    .waboot__hero-title {
        font-size: 3rem;
    }
}
```

--------------------------------

### Waboot Theme Product Display Configuration

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/theme-documentation.md

XML snippets for configuring product display settings, including the number of products per row and visibility of filters.

```xml
<setting var="products_per_row" control_type="select" name="Products Per Row">
    <option value="3">3 Products</option>
    <option value="4">4 Products</option>
    <option value="5">5 Products</option>
</setting>

<setting var="show_filters" control_type="checkbox" name="Show Product Filters">
    <description>Display filters sidebar on category pages</description>
</setting>
```

--------------------------------

### Webasyst Theme Templates Overview

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/README.md

Illustrates the typical structure of Smarty templates within a Webasyst theme, covering essential files like layout, header, footer, and specific page templates for homepage, category, and product detail views.

```smarty
templates/
  layout.html           # Main layout structure
  header.html           # Header template
  footer.html           # Footer template
  home.html             # Homepage content
  category.html         # Product listing page
  product.html          # Product detail page
```

--------------------------------

### Waboot Theme Header Configuration

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/theme-documentation.md

XML snippets for configuring the header style and uploading a logo for the Waboot theme.

```xml
<setting var="header_style" control_type="select" name="Header Style">
    <option value="default">Default</option>
    <option value="minimal">Minimal</option>
    <option value="centered">Centered</option>
</setting>

<setting var="logo" control_type="file" name="Logo Upload">
    <description>Upload your store logo (recommended: 200x50px)</description>
</setting>
```

--------------------------------

### Bootstrap 5 Bundle and Popper

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/waboot/templates/layout.html

Includes the Bootstrap 5 JavaScript bundle, which typically contains all necessary components and dependencies, including Popper.js for tooltips and popovers.

```JavaScript
{\* JavaScript - Bootstrap 5 Bundle (includes Popper) *}
```

--------------------------------

### Blog Article Structured Data (JSON-LD)

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/stack-bootstrap-5-alpine.js-BEM-atomic-design.md

Implements schema.org Article structured data for blog posts in Webasyst/Shop-Script. Includes headline, description, image, author, publisher, dates, word count, and keywords. Uses Smarty syntax.

```html
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "{$post.title|escape}",
    "description": "{$post.summary|escape}",
    "image": "{$post.image}",
    "author": {
        "@type": "Person",
        "name": "{$post.author.name|escape}",
        "url": "{$post.author.url}"
    },
    "publisher": {
        "@type": "Organization",
        "name": "{$site_name|escape}",
        "logo": {
            "@type": "ImageObject",
            "url": "{$site_logo_url}"
        }
    },
    "datePublished": "{$post.datetime}",
    "dateModified": "{$post.update_datetime|default:$post.datetime}",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "{$post.url}"
    },
    "wordCount": "{$post.text|strip_tags|str_word_count}",
    "timeRequired": "PT{$post.text|strip_tags|str_word_count/200|round}M",
    "keywords": "{if $post.tags}{foreach $post.tags as $tag}{$tag.name}{if !$tag@last}, {/if}{/foreach}{/if}"
}
</script>
```

--------------------------------

### Shop-Script Product Structured Data (JSON-LD)

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/stack-bootstrap-5-alpine.js-BEM-atomic-design.md

Defines schema.org Product structured data for Shop-Script. Includes product details like name, description, SKU, brand, images, offers, availability, seller, ratings, and reviews. Uses Smarty syntax.

```html
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Product",
    "name": "{$product.name|escape}",
    "description": "{$product.summary|escape}",
    "sku": "{$product.sku}",
    "gtin": "{$product.gtin}",
    "brand": {
        "@type": "Brand",
        "name": "{$product.brand|escape}"
    },
    "image": [
        {foreach $product.images as $image}
        "{$image.url}"{if !$image@last},{/if}
        {/foreach}
    ],
    "offers": {
        "@type": "Offer",
        "url": "{$product.url}",
        "priceCurrency": "{$product.currency}",
        "price": "{$product.price}",
        "priceValidUntil": "{$smarty.now|date_format:'%Y-%m-%d'|date_modify:'+1 year'}",
        "availability": "{if $product.available}https://schema.org/InStock{else}https://schema.org/OutOfStock{/if}",
        "seller": {
            "@type": "Organization",
            "name": "{$shop.name|escape}"
        }
    },
    {if $product.reviews}
    "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "{$product.rating}",
        "reviewCount": "{$product.reviews_count}",
        "bestRating": "5",
        "worstRating": "1"
    },
    "review": [
        {foreach $product.reviews as $review}
        {
            "@type": "Review",
            "author": {
                "@type": "Person",
                "name": "{$review.author|escape}"
            },
            "reviewRating": {
                "@type": "Rating",
                "ratingValue": "{$review.rating}",
                "bestRating": "5",
                "worstRating": "1"
            },
            "reviewBody": "{$review.text|escape}",
            "datePublished": "{$review.date}"
        }{if !$review@last},{/if}
        {/foreach}
    ],
    {/if}
    "category": "{$product.category.name|escape}"
}
</script>
```

--------------------------------

### Custom Product Card (Smarty)

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/theme-documentation.md

Provides a template for a custom product card, including image display, quick view button, and custom meta information like brand. It uses Smarty variables for product data.

```smarty
{* Custom product display *}
<div class="waboot__product-card waboot__product-card--custom">
    <div class="waboot__product-image">
        <img src="{$product.image.url_crop}" alt="{$product.name|escape}">
        {* Add custom overlay *}
        <div class="waboot__product-overlay">
            <button class="btn btn-primary">Quick View</button>
        </div>
    </div>
    <div class="waboot__product-content">
        <h3>{$product.name|escape}</h3>
        <p class="price">{wa_currency($product.price)}</p>
        {* Custom additional content *}
        <div class="custom-product-meta">
            {if $product.features.brand}
                <span class="brand">Brand: {$product.features.brand.value}</span>
            {/if}
        </div>
    </div>
</div>
```

--------------------------------

### Responsive Image with Lazy Loading

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/theme-documentation.md

Illustrates the implementation of responsive images using the `srcset` and `sizes` attributes for adaptive loading based on viewport size. The `loading="lazy"` attribute is also included for performance optimization by deferring image loading until it's near the viewport.

```html
<!-- Responsive images -->
<img src="{$product.image.url_thumb}"
     srcset="{$product.image.url_thumb} 300w,
             {$product.image.url_crop} 600w,
             {$product.image.url_original} 1200w"
     sizes="(max-width: 768px) 300px, 600px"
     loading="lazy"
     alt="{$product.name|escape}">
```

--------------------------------

### CSS Component Organization

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/theme-documentation.md

Demonstrates a structured approach to organizing CSS files using `@import` statements. Styles are categorized into base, layout, components, e-commerce specific, and utilities for better maintainability.

```css
/* Base styles */
@import "base/reset.css";
@import "base/typography.css";

/* Layout components */
@import "layout/header.css";
@import "layout/footer.css";
@import "layout/navigation.css";

/* UI components */
@import "components/buttons.css";
@import "components/forms.css";
@import "components/cards.css";

/* E-commerce specific */
@import "shop/products.css";
@import "shop/cart.css";
@import "shop/checkout.css";

/* Utilities */
@import "utilities/spacing.css";
@import "utilities/display.css";
```

--------------------------------

### Webasyst Website Structured Data (JSON-LD)

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/stack-bootstrap-5-alpine.js-BEM-atomic-design.md

Provides basic schema.org structured data for a website using Webasyst templating. Includes site name, URL, description, publisher, and search action. Uses Smarty syntax for dynamic content.

```html
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "{$site_name|escape}",
    "url": "{$wa->getUrl()}",
    "description": "{$site_description|escape}",
    "publisher": {
        "@type": "Organization",
        "name": "{$site_name|escape}",
        "logo": {
            "@type": "ImageObject",
            "url": "{$site_logo_url}"
        }
    },
    "potentialAction": {
        "@type": "SearchAction",
        "target": {
            "@type": "EntryPoint",
            "urlTemplate": "{$wa->getUrl()}search/?query={literal}{search_term_string}{/literal}"
        },
        "query-input": "required name=search_term_string"
    }
}
</script>
```

--------------------------------

### WordPress to Webasyst Function Mapping

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/README.md

Maps common WordPress/WooCommerce functions to their Webasyst equivalents, facilitating the migration process by showing direct correlations for template and logic inclusion.

```apidoc
WordPress/WooCommerce | Webasyst Equivalent | Description
----------------------|-------------------|-------------
`get_header()` | `{include file="header.html"}` | Include header
`the_title()` | `{$product.name\|escape}` | Display title
`wc_get_products()` | `{$products.products}` | Get products
`wc_price()` | `{wa_currency($price)}` | Format price
`wp_nav_menu()` | `{wa_navigation}` | Navigation menu
`add_to_cart` | `{$wa->shop->cart->add()}` | Add to cart

*See [Migration Guide](docs/migration-guide.md) for complete function mapping*
```

--------------------------------

### Smarty Template Inclusion

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/theme-documentation.md

Demonstrates how to include other template files into the current template. This promotes modularity and reusability of template components like headers, footers, or product cards.

```smarty
{include file="header.html"}
{include file="footer.html"}
{include file="product-card.html" product=$product}
```

--------------------------------

### Smarty Loops and Iteration

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/theme-documentation.md

Shows how to iterate over collections and perform repetitive tasks in Smarty templates. This includes looping through product lists and rendering star ratings based on product scores.

```smarty
{foreach $products.products as $product}
    <div class="product-card">
        <h3>{$product.name|escape}</h3>
        <p>{wa_currency($product.price)}</p>
    </div>
{/foreach}

{for $i=1 to 5}
    <i class="fa fa-star {if $i <= $product.rating}active{/if}"></i>
{/for}
```

--------------------------------

### Alpine.js Store for Cart and Wishlist

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/README.md

Demonstrates the global state management using Alpine.js store for shopping cart items, wishlist, and core functionalities like adding to cart and searching.

```javascript
// Global state management
$store.waboot.cartItems        // Shopping cart
$store.waboot.wishlistItems    // User wishlist  
$store.waboot.addToCart()      // Add product to cart
$store.waboot.search()         // Product search
```

--------------------------------

### Webasyst Theme Configuration (theme.xml)

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/README.md

The primary configuration file for a Webasyst theme, defining its name, version, author, and other essential metadata required for integration with the Webasyst platform.

```xml
<?xml version="1.0" encoding="utf-8"?>
<theme>
    <name>Waboot</name>
    <version>1.0.0</version>
    <vendor>YourCompany</vendor>
    <description>
        A modern, fully-local Webasyst e-commerce theme ported from WordPress Bootscore.
    </description>
    <author>
        <name>Your Name</name>
        <email>your.email@example.com</email>
    </author>
    <settings>
        <!-- Theme specific settings will go here -->
    </settings>
</theme>
```

--------------------------------

### JavaScript Performance Monitoring

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/theme-documentation.md

Provides JavaScript code for monitoring page performance. It includes measuring the total page load time using `performance.timing` and observing Core Web Vitals metrics like 'measure', 'navigation', and 'resource' using `PerformanceObserver`.

```javascript
// Performance timing
window.addEventListener('load', function() {
    const perfData = performance.timing;
    const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
    console.log('Page load time:', pageLoadTime, 'ms');
});

// Core Web Vitals
new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
        console.log('Performance metric:', entry.name, entry.value);
    }
}).observe({ entryTypes: ['measure', 'navigation', 'resource'] });
```

--------------------------------

### Smarty Product Variables

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/theme-documentation.md

Provides access to product-specific data within Smarty templates. These variables allow dynamic display of product details like ID, name, price, images, and ratings.

```smarty
{$product.id}          <!-- Product ID -->
{$product.name}        <!-- Product name -->
{$product.url}         <!-- Product URL slug -->
{$product.price}       <!-- Product price -->
{$product.compare_price} <!-- Compare at price -->
{$product.description} <!-- Full description -->
{$product.summary}     <!-- Short description -->
{$product.image}       <!-- Featured image -->
{$product.images}      <!-- All product images -->
{$product.features}    <!-- Product features/attributes -->
{$product.available}   <!-- Stock availability -->
{$product.rating}      <!-- Average rating -->
{$product.reviews_count} <!-- Number of reviews -->
```

--------------------------------

### Extend Alpine.js with Custom Store

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/README.md

Shows how to extend Alpine.js functionality by initializing a custom store, allowing for additional global state management and application logic.

```javascript
// Extend Alpine.js functionality
document.addEventListener('alpine:init', () => {
    Alpine.store('custom', {
        // Your custom store
    });
});
```

--------------------------------

### Waboot Theme Color Scheme Configuration

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/theme-documentation.md

XML snippet for configuring the color scheme of the Waboot theme, offering predefined options and a custom choice.

```xml
<setting var="color_scheme" control_type="select" name="Color Scheme">
    <option value="default">Default Blue</option>
    <option value="green">Green</option>
    <option value="purple">Purple</option>
    <option value="custom">Custom</option>
</setting>
```

--------------------------------

### Waboot Theme Footer Template (Smarty)

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/waboot/templates/footer.html

This Smarty template defines the footer structure for the Waboot theme. It dynamically fetches theme and shop settings from the Webasyst framework to display the site name, description, social media links, quick navigation, product categories, customer service options, and contact information. The template uses conditional logic and loops to render content based on available settings and data.

```smarty
{\* Footer Template for Waboot Theme *}{\* Converted from WordPress Bootscore footer.php to Webasyst Smarty template *}{\* Get theme settings *} {$footer_text = $wa->theme()->settings('footer_text', '')} {$layout_type = $wa->theme()->settings('layout_type', 'wide')} {$logo = $wa->theme()->settings('logo')} {* Main Footer *} 

{\* Footer Column 1 - About/Logo *}

{\* Logo or Site Name *} {if $logo} ![{$wa->shop->settings('name')|escape}]({$logo}) {else}

##### {$wa->shop->settings('name')|escape}

{/if} {\* About Text *}

{if $wa->shop->settings('description')} {$wa->shop->settings('description')|escape|truncate:150} {else} Your trusted online store for quality products and exceptional service. Shop with confidence and enjoy fast, reliable delivery. {/if}

{\* Social Media Links *}

{if $wa->shop->settings('social_facebook')} []({$wa->shop->settings('social_facebook')}){/if} {if $wa->shop->settings('social_twitter')} []({$wa->shop->settings('social_twitter')}){/if} {if $wa->shop->settings('social_instagram')} []({$wa->shop->settings('social_instagram')}){/if} {if $wa->shop->settings('social_youtube')} []({$wa->shop->settings('social_youtube')}){/if} {if $wa->shop->settings('social_linkedin')} []({$wa->shop->settings('social_linkedin')}){/if}

{\* Footer Column 2 - Quick Links *}

##### Quick Links

*   [Home]({$wa->getUrl()})
*   [About Us]({$wa->getUrl('shop/frontend/about')})
*   [Contact]({$wa->getUrl('shop/frontend/contact')})
{if $wa->getApp('blog')}*   [Blog]({$wa->getAppUrl('blog')})
{/if}*   [Sitemap]({$wa->getUrl('shop/frontend/sitemap')})

{\* Footer Column 3 - Shop Categories *}

##### Categories

{if $categories} {foreach $categories as $cat name="footer_cats"} {if $smarty.foreach.footer_cats.index < 6}*   [{$cat.name|escape}]({$cat.url})
{/if} {/foreach} {if count($categories) > 6}*   [View All Categories]({$wa->getUrl('shop/frontend/categories')})
{/if} {else}*   [Electronics](#)
*   [Clothing](#)
*   [Home & Garden](#)
*   [Sports](#)
*   [Books](#)
{/if}

{\* Footer Column 4 - Customer Service *}

##### Customer Service

{if $wa->user()->isAuth()}*   [My Account]({$wa->getUrl('shop/frontend/my')})
*   [Order History]({$wa->getUrl('shop/frontend/orders')})
{else}*   [Login]({$wa->getUrl('shop/frontend/login')})
*   [Register]({$wa->getUrl('shop/frontend/signup')})
{/if}*   [Shipping Info]({$wa->getUrl('shop/frontend/shipping')})
*   [Returns]({$wa->getUrl('shop/frontend/returns')})
*   [FAQ]({$wa->getUrl('shop/frontend/faq')})
*   [Help Center]({$wa->getUrl('shop/frontend/help')})

{\* Footer Column 5 - Contact Info & Newsletter *}

##### Get In Touch

{\* Contact Information *}

{if $wa->shop->settings('contact_address')}

{$wa->shop->settings('contact_address')}

{/if} {if $wa->shop->settings('contact_phone')}

[{$wa->shop->settings('contact_phone')}](tel:{$wa->shop->settings('contact_phone')})

{/if} {if $wa->shop->settings('contact_email')}

[{$wa->shop->settings('contact_email')}](mailto:{$wa->shop->settings('contact_email')})

{/if}

{\* Newsletter Signup *}

```

--------------------------------

### Product Tab Navigation

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/waboot/templates/product.html

Generates navigation links for product tabs, including Description, Specifications, Reviews, and Shipping & Returns. It conditionally includes the Specifications tab if product features exist.

```smarty
*   Description
{if $product.features}*   Specifications
{/if} {if $show_reviews}*   Reviews ({$product.reviews_count|default:0})
{/if}*   Shipping & Returns
```

--------------------------------

### Custom Header Logo (Smarty)

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/theme-documentation.md

Demonstrates how to implement a custom logo in the header template. It checks for a logo setting and displays either an image or the shop name.

```smarty
{* In header.html *}
<a class="navbar-brand" href="{$wa_url}">
    {if $wa->theme()->settings('logo')}
        <img src="{$wa->theme()->settings('logo')}" 
             alt="{$wa->shop->settings('name')}" 
             class="waboot__logo">
    {else}
        <span class="waboot__logo-text">{$wa->shop->settings('name')}</span>
    {/if}
</a>
```

--------------------------------

### Alpine.js Store Integration

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/docs/theme-documentation.md

Demonstrates accessing and manipulating global state managed by Alpine.js within the Waboot theme. This includes interacting with cart items, wishlist data, and performing actions like searching or formatting prices.

```javascript
// Access global store
$store.waboot.cartItems;         // Cart items array
$store.waboot.cartCount;         // Number of items in cart
$store.waboot.cartTotal;         // Cart total amount
$store.waboot.wishlistItems;     // Wishlist items
$store.waboot.addToCart(product); // Add product to cart
$store.waboot.toggleWishlist(product); // Toggle wishlist
$store.waboot.search(query);     // Search products
$store.waboot.formatPrice(price); // Format price with currency
```

--------------------------------

### Display Product Description

Source: https://github.com/adgooroo/wp-wa-migration/blob/main/waboot/templates/product.html

Shows the product's description. If no description is available, it displays a default message. This snippet relies on the '$product.description' variable.

```smarty
{if $product.description} {$product.description} {else}
  No description available for this product.
{/if}
```