Changeset 3435486

Timestamp:

01/08/2026 09:20:09 PM (6 weeks ago)

Author:

hosseinkarami

Message:

Update to version 1.1.0 - Add Shopify OAuth support and improvements

Location:

products-showcase/trunk

Files:

• README.md (modified) (3 diffs)
• assets/admin/admin.css (modified) (2 diffs)
• assets/admin/admin.js (modified) (1 diff)
• includes/class-admin-settings.php (modified) (5 diffs)
• includes/class-shopify-oauth.php (added)
• products-showcase.php (modified) (4 diffs)
• readme.txt (modified) (10 diffs)

products-showcase/trunk/README.md

@@ -3 +3 @@
 A powerful WordPress plugin that displays Shopify products and collections in beautiful, responsive carousels using **native Gutenberg blocks**.
 
-![Version](https://img.shields.io/badge/version-1.0.0-blue.svg)
+![Version](https://img.shields.io/badge/version-1.1.0-blue.svg)
 ![WordPress](https://img.shields.io/badge/wordpress-6.0%2B-blue.svg)
 ![PHP](https://img.shields.io/badge/php-8.1%2B-purple.svg)
@@ -49 +49 @@
 **Data Transmitted to Shopify**:
 1. **Shopify Store URL** - Your store's domain (e.g., `your-store.myshopify.com`) configured in plugin settings
-2. **Admin API Access Token** - Your Shopify Admin API authentication token (configured in plugin settings)
-3. **GraphQL Queries** - Specific queries requesting product and collection data
+2. **OAuth Credentials** - Client ID and Client Secret are used during the one-time OAuth authorization flow
+3. **Admin API Access Token** - Obtained automatically via OAuth and used for all subsequent API requests
+4. **GraphQL Queries** - Specific queries requesting product and collection data
 
 **When Data is Transmitted**:
@@ -135 +136 @@
 ## ⚙️ Configuration
 
-### 1. Get Shopify API Credentials
+### 1. Create a Shopify Custom App
 
 1. Log in to your **Shopify Admin**
 2. Navigate to **Settings → Apps and sales channels**
 3. Click **"Develop apps"**
-4. **Create a new app** or select existing
-5. Configure **Admin API scopes**:
+4. Click **"Create an app"** and give it a name (e.g., "WordPress Integration")
+
+### 2. Configure API Access
+
+1. In your app, go to the **"Configuration"** tab
+2. Under **"Admin API integration"**, click **"Configure"**
+3. Enable the following scope:
    - ✅ `read_products` (required)
-6. **Install the app** to your store
-7. Copy the **Admin API access token**
-
-### 2. Configure Plugin Settings
-
-1. Go to **Settings → Shopify Products** in WordPress admin
+4. Click **"Save"**
+5. **Important**: Under **"Allowed redirection URL(s)"**, add the Redirect URL shown in your WordPress plugin settings
+
+### 3. Get Your Credentials
+
+1. Go to the **"API credentials"** tab in your Shopify app
+2. Copy the **Client ID**
+3. Copy the **Client secret**
+
+### 4. Connect via OAuth (Easy Setup!)
+
+1. Go to **Shopify Products** in WordPress admin
 2. Enter your **Shopify Store URL** (e.g., `your-store.myshopify.com`)
-3. Paste your **Admin API Access Token**
-4. Set **Cache Duration** (default: 1 hour)
-5. Click **Save Settings**
-
-The plugin will test the connection and show you a success message if configured correctly.
+3. Paste your **Client ID**
+4. Paste your **Client Secret**
+5. Click **"Connect to Shopify"**
+6. You'll be redirected to Shopify to authorize the connection
+7. After authorizing, you'll be redirected back to WordPress - done! ✅
+
+The plugin automatically:
+- Obtains the access token via secure OAuth
+- Detects the latest supported Shopify API version
+- Tests the connection and displays your store name
 
 ## 📖 Usage

products-showcase/trunk/assets/admin/admin.css

@@ -344 +344 @@
 .prodshow-connection-status-card.error .prodshow-status-value {
     color: #dc3545;
+}
+
+.prodshow-auto-detected {
+    font-size: 0.85em;
+    color: #28a745;
+    font-weight: normal;
+}
+
+.prodshow-fallback-version {
+    font-size: 0.85em;
+    color: #dc3545;
+    font-weight: normal;
+}
+
+.prodshow-api-version-display {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+#prodshow-refresh-api-version {
+    padding: 2px 6px;
+    min-height: auto;
+    line-height: 1;
+}
+
+#prodshow-refresh-api-version .dashicons {
+    font-size: 14px;
+    width: 14px;
+    height: 14px;
+}
+
+.prodshow-spin {
+    animation: prodshow-spin 1s linear infinite;
+}
+
+@keyframes prodshow-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
 }
 
@@ -937 +977 @@
     display: none;
 }
+
+/* OAuth Section Styles */
+#prodshow-oauth-section .required {
+    color: #dc3545;
+    font-weight: bold;
+}
+
+.prodshow-oauth-connected-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px;
+    background: #f0f9f0;
+    border-top: 1px solid #e5e5e5;
+}
+
+.prodshow-oauth-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #28a745;
+}
+
+.prodshow-oauth-status .dashicons {
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+}
+
+.prodshow-redirect-url-box {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: #f9f9f9;
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    max-width: 100%;
+    overflow-x: auto;
+}
+
+.prodshow-redirect-url-box code {
+    background: transparent;
+    padding: 0;
+    font-size: 13px;
+    word-break: break-all;
+    flex: 1;
+}
+
+#prodshow-copy-redirect-url {
+    flex-shrink: 0;
+    padding: 4px 8px;
+    min-height: auto;
+    line-height: 1;
+}
+
+#prodshow-copy-redirect-url .dashicons {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+}
+
+#prodshow-copy-redirect-url.copied {
+    background: #28a745;
+    border-color: #28a745;
+    color: #fff;
+}
+
+.prodshow-oauth-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 24px;
+    background: #f9f9f9;
+    border-top: 1px solid #e5e5e5;
+}
+
+.prodshow-connect-button {
+    display: inline-flex !important;
+    align-items: center;
+    gap: 10px;
+    padding: 14px 28px !important;
+    font-size: 15px !important;
+    background: #95BF46 !important;
+    border-color: #95BF46 !important;
+}
+
+.prodshow-connect-button::before {
+    content: none !important;
+}
+
+.prodshow-connect-button:hover,
+.prodshow-connect-button:focus {
+    background: #7aa93a !important;
+    border-color: #7aa93a !important;
+}
+
+.prodshow-connect-button:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+}
+
+.prodshow-connect-button svg {
+    flex-shrink: 0;
+}
+
+.prodshow-oauth-spinner {
+    float: none !important;
+    margin: 0 !important;
+}
+
+/* Responsive adjustments for OAuth */
+@media screen and (max-width: 782px) {
+    .prodshow-oauth-connected-info {
+        flex-direction: column;
+        gap: 16px;
+        text-align: center;
+    }
+
+    .prodshow-redirect-url-box {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .prodshow-redirect-url-box code {
+        text-align: center;
+    }
+
+    #prodshow-copy-redirect-url {
+        width: 100%;
+    }
+
+    .prodshow-oauth-actions {
+        flex-direction: column;
+    }
+
+    .prodshow-connect-button {
+        width: 100%;
+        justify-content: center;
+    }
+}

products-showcase/trunk/assets/admin/admin.js

@@ -285 +285 @@
         });
 
+        /**
+         * OAuth Connect to Shopify
+         */
+        $('#prodshow-connect-btn').on('click', function(e) {
+            e.preventDefault();
+            
+            var $btn = $(this);
+            var $spinner = $('.prodshow-oauth-spinner');
+            var nonce = $('#prodshow-oauth-nonce').val();
+            
+            // Get form values
+            var shopUrl = $('#prodshow_shopify_url').val().trim();
+            var clientId = $('#prodshow_shopify_client_id').val().trim();
+            var clientSecret = $('#prodshow_shopify_client_secret').val().trim();
+            
+            // Validate fields
+            if (!shopUrl) {
+                alert('Please enter your Shopify store URL.');
+                $('#prodshow_shopify_url').focus();
+                return;
+            }
+            
+            if (!clientId) {
+                alert('Please enter your Client ID.');
+                $('#prodshow_shopify_client_id').focus();
+                return;
+            }
+            
+            if (!clientSecret) {
+                alert('Please enter your Client Secret.');
+                $('#prodshow_shopify_client_secret').focus();
+                return;
+            }
+            
+            // Validate shop URL format
+            if (!shopUrl.match(/^[a-zA-Z0-9][a-zA-Z0-9\-]*\.myshopify\.com$/)) {
+                alert('Please enter a valid Shopify store URL (e.g., your-store.myshopify.com)');
+                $('#prodshow_shopify_url').focus();
+                return;
+            }
+            
+            // Show loading state
+            $btn.prop('disabled', true);
+            $spinner.addClass('is-active');
+            
+            // Make AJAX request to initiate OAuth
+            $.ajax({
+                url: ajaxurl,
+                type: 'POST',
+                data: {
+                    action: 'prodshow_initiate_oauth',
+                    nonce: nonce,
+                    shop_url: shopUrl,
+                    client_id: clientId,
+                    client_secret: clientSecret
+                },
+                success: function(response) {
+                    if (response.success && response.data.redirect_url) {
+                        // Redirect to Shopify for authorization
+                        window.location.href = response.data.redirect_url;
+                    } else {
+                        alert(response.data.message || 'Failed to initiate connection. Please try again.');
+                        $btn.prop('disabled', false);
+                        $spinner.removeClass('is-active');
+                    }
+                },
+                error: function(xhr, status, error) {
+                    console.error('OAuth Error:', error);
+                    alert('Connection error. Please try again.');
+                    $btn.prop('disabled', false);
+                    $spinner.removeClass('is-active');
+                }
+            });
+        });
+
+        /**
+         * Disconnect from Shopify
+         */
+        $('#prodshow-disconnect-btn').on('click', function(e) {
+            e.preventDefault();
+            
+            if (!confirm('Are you sure you want to disconnect from Shopify? You will need to reconnect to continue using the plugin.')) {
+                return;
+            }
+            
+            var $btn = $(this);
+            var nonce = $('#prodshow-oauth-nonce').val() || $('input[name="_wpnonce"]').val();
+            
+            // If no nonce found, create one from the hidden field
+            if (!nonce) {
+                // Try to get it from the page
+                nonce = $('#prodshow-clear-cache-nonce').val();
+            }
+            
+            $btn.prop('disabled', true).text('Disconnecting...');
+            
+            $.ajax({
+                url: ajaxurl,
+                type: 'POST',
+                data: {
+                    action: 'prodshow_disconnect_shopify',
+                    nonce: nonce
+                },
+                success: function(response) {
+                    if (response.success) {
+                        // Reload the page to show disconnected state
+                        window.location.reload();
+                    } else {
+                        alert(response.data.message || 'Failed to disconnect. Please try again.');
+                        $btn.prop('disabled', false).text('Disconnect');
+                    }
+                },
+                error: function() {
+                    alert('Connection error. Please try again.');
+                    $btn.prop('disabled', false).text('Disconnect');
+                }
+            });
+        });
+
+        /**
+         * Copy Redirect URL to clipboard
+         */
+        $('#prodshow-copy-redirect-url').on('click', function(e) {
+            e.preventDefault();
+            
+            var $btn = $(this);
+            var redirectUrl = $('#prodshow-redirect-url').text();
+            
+            // Copy to clipboard
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+                navigator.clipboard.writeText(redirectUrl).then(function() {
+                    showCopySuccess($btn);
+                }).catch(function() {
+                    fallbackCopy(redirectUrl, $btn);
+                });
+            } else {
+                fallbackCopy(redirectUrl, $btn);
+            }
+        });
+
+        function fallbackCopy(text, $btn) {
+            var $temp = $('<textarea>');
+            $('body').append($temp);
+            $temp.val(text).select();
+            try {
+                document.execCommand('copy');
+                showCopySuccess($btn);
+            } catch (err) {
+                alert('Failed to copy. Please copy manually.');
+            }
+            $temp.remove();
+        }
+
+        function showCopySuccess($btn) {
+            var $icon = $btn.find('.dashicons');
+            $icon.removeClass('dashicons-clipboard').addClass('dashicons-yes');
+            $btn.addClass('copied');
+            
+            setTimeout(function() {
+                $icon.removeClass('dashicons-yes').addClass('dashicons-clipboard');
+                $btn.removeClass('copied');
+            }, 2000);
+        }
+
+        /**
+         * Refresh API Version
+         */
+        $('#prodshow-refresh-api-version').on('click', function(e) {
+            e.preventDefault();
+            
+            var $btn = $(this);
+            var $icon = $btn.find('.dashicons');
+            var nonce = $('#prodshow-api-version-nonce').val() || $('#prodshow-oauth-nonce').val() || $('#prodshow-clear-cache-nonce').val();
+            
+            // Show loading state
+            $btn.prop('disabled', true);
+            $icon.addClass('prodshow-spin');
+            
+            $.ajax({
+                url: ajaxurl,
+                type: 'POST',
+                data: {
+                    action: 'prodshow_refresh_api_version',
+                    nonce: nonce
+                },
+                success: function(response) {
+                    if (response.success) {
+                        // Update the displayed version
+                        var $display = $('.prodshow-api-version-display');
+                        var newHtml = response.data.version + 
+                            ' <span class="prodshow-auto-detected">(' + 'auto-detected' + ')</span>' +
+                            ' <button type="button" id="prodshow-refresh-api-version" class="button button-small" title="Refresh API Version">' +
+                            '<span class="dashicons dashicons-update"></span></button>';
+                        $display.html(newHtml);
+                        
+                        // Show success feedback
+                        alert(response.data.message);
+                        
+                        // Reload to update all references
+                        window.location.reload();
+                    } else {
+                        alert(response.data.message || 'Failed to refresh API version.');
+                        $btn.prop('disabled', false);
+                        $icon.removeClass('prodshow-spin');
+                    }
+                },
+                error: function() {
+                    alert('Connection error. Please try again.');
+                    $btn.prop('disabled', false);
+                    $icon.removeClass('prodshow-spin');
+                }
+            });
+        });
+
     });
 

products-showcase/trunk/includes/class-admin-settings.php

@@ -77 +77 @@
         );
 
+        // OAuth settings
+        register_setting(
+            'prodshow_settings',
+            'prodshow_shopify_client_id',
+            array(
+                'type' => 'string',
+                'sanitize_callback' => 'sanitize_text_field',
+                'default' => '',
+                'show_in_rest' => false,
+            )
+        );
+
+        register_setting(
+            'prodshow_settings',
+            'prodshow_shopify_client_secret',
+            array(
+                'type' => 'string',
+                'sanitize_callback' => 'sanitize_text_field',
+                'default' => '',
+                'show_in_rest' => false,
+            )
+        );
+
         register_setting(
             'prodshow_settings',
@@ -179 +202 @@
         }
 
+        // Show OAuth success/error notices
+        if (isset($_GET['oauth_success'])) {
+            $success = get_transient('prodshow_oauth_success');
+            if ($success) {
+                delete_transient('prodshow_oauth_success');
+                echo '<div class="notice notice-success is-dismissible"><p>' . esc_html__('🎉 Successfully connected to Shopify! Your store is now linked.', 'products-showcase') . '</p></div>';
+            }
+        }
+
+        if (isset($_GET['oauth_error'])) {
+            $error = get_transient('prodshow_oauth_error');
+            if ($error) {
+                delete_transient('prodshow_oauth_error');
+                echo '<div class="notice notice-error is-dismissible"><p>' . esc_html__('Connection failed: ', 'products-showcase') . esc_html($error) . '</p></div>';
+            }
+        }
+
         // Test connection.
         $connection_status = $this->test_shopify_connection();
+        $is_oauth_connected = PRODSHOW_Shopify_OAuth::is_connected_via_oauth();
+
+        // Auto-detect API version if connected but not yet stored
+        if ($connection_status['success']) {
+            $stored_version = get_option('prodshow_shopify_api_version', '');
+            if (empty($stored_version)) {
+                // Try to detect and store the API version now
+                PRODSHOW_Shopify_OAuth::refresh_api_version();
+            }
+        }
 
         // Include the header.
@@ -200 +250 @@
                                 <div class="prodshow-section-header">
                                     <h2><?php esc_html_e('🚀 Quick Start', 'products-showcase'); ?></h2>
-                                    <p><?php esc_html_e('Connect your Shopify store and start displaying products:', 'products-showcase'); ?></p>
+                                    <p><?php esc_html_e('Connect your Shopify store in 3 easy steps:', 'products-showcase'); ?></p>
                                 </div>
                                 <div class="prodshow-banner-content">
                                     <ol class="prodshow-steps">
                                         <li>
-                                            <strong><?php esc_html_e('Create Custom App', 'products-showcase'); ?></strong>
-                                            <p><?php esc_html_e('Shopify Admin → Settings → Apps → Develop apps → Create an app', 'products-showcase'); ?></p>
+                                            <strong><?php esc_html_e('Create a Custom App in Shopify', 'products-showcase'); ?></strong>
+                                            <p><?php esc_html_e('Go to Shopify Admin → Settings → Apps and sales channels → Develop apps → Create an app', 'products-showcase'); ?></p>
                                         </li>
                                         <li>
-                                            <strong><?php esc_html_e('Enable API Access', 'products-showcase'); ?></strong>
-                                            <p><?php esc_html_e('Configure Admin API → Enable "read_products" scope → Install app', 'products-showcase'); ?></p>
+                                            <strong><?php esc_html_e('Configure API Access', 'products-showcase'); ?></strong>
+                                            <p>
+                                                <?php esc_html_e('In your app settings:', 'products-showcase'); ?><br>
+                                                • <?php esc_html_e('Go to "Configuration" tab', 'products-showcase'); ?><br>
+                                                • <?php esc_html_e('Under "Admin API integration", click "Configure"', 'products-showcase'); ?><br>
+                                                • <?php esc_html_e('Enable "read_products" scope and save', 'products-showcase'); ?><br>
+                                                • <?php 
+                                                    echo wp_kses(
+                                                        sprintf(
+                                                            /* translators: %s: redirect URL */
+                                                            __('Set Allowed redirection URL to: %s', 'products-showcase'),
+                                                            '<code>' . esc_html(PRODSHOW_Shopify_OAuth::get_redirect_uri()) . '</code>'
+                                                        ),
+                                                        array('code' => array())
+                                                    );
+                                                ?>
+                                            </p>
                                         </li>
                                         <li>
-                                            <strong><?php esc_html_e('Enter Credentials', 'products-showcase'); ?></strong>
-                                            <p><?php esc_html_e('Copy your store URL and access token, paste below, and save', 'products-showcase'); ?></p>
-                                        </li>
-                                        <li>
-                                            <strong><?php esc_html_e('Add Products to Your Site', 'products-showcase'); ?></strong>
-                                            <p><?php esc_html_e('Edit any page/post → Click + to add block → Search "Shopify Product Showcase" → Select product or collection', 'products-showcase'); ?></p>
+                                            <strong><?php esc_html_e('Copy Client ID & Secret', 'products-showcase'); ?></strong>
+                                            <p><?php esc_html_e('Go to "API credentials" tab → Copy the Client ID and Client secret → Paste them below and click "Connect to Shopify"', 'products-showcase'); ?></p>
                                         </li>
                                     </ol>
                                     <div class="prodshow-banner-links">
-                                        <a href="https://shopify.dev/docs/apps/auth/admin-app-access-tokens" target="_blank" rel="noopener noreferrer" class="prodshow-link-primary">
+                                        <a href="https://shopify.dev/docs/apps/build/authentication-authorization/access-tokens/" target="_blank" rel="noopener noreferrer" class="prodshow-link-primary">
                                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                 <circle cx="12" cy="12" r="10"></circle>
@@ -264 +325 @@
                                         <div class="prodshow-status-item">
                                             <span class="prodshow-status-label"><?php esc_html_e('API Version:', 'products-showcase'); ?></span>
-                                            <span class="prodshow-status-value"><?php echo esc_html(PRODSHOW_SHOPIFY_API_VERSION); ?></span>
+                                            <span class="prodshow-status-value prodshow-api-version-display">
+                                                <?php 
+                                                $current_api_version = prodshow_get_api_version();
+                                                $stored_version = get_option('prodshow_shopify_api_version', '');
+                                                echo esc_html($current_api_version);
+                                                if (!empty($stored_version)) {
+                                                    echo ' <span class="prodshow-auto-detected">(' . esc_html__('auto-detected', 'products-showcase') . ')</span>';
+                                                } else {
+                                                    echo ' <span class="prodshow-fallback-version">(' . esc_html__('fallback', 'products-showcase') . ')</span>';
+                                                }
+                                                ?>
+                                                <button type="button" id="prodshow-refresh-api-version" class="button button-small" title="<?php esc_attr_e('Refresh API Version', 'products-showcase'); ?>">
+                                                    <span class="dashicons dashicons-update"></span>
+                                                </button>
+                                                <input type="hidden" id="prodshow-api-version-nonce" value="<?php echo esc_attr(wp_create_nonce('prodshow_oauth_nonce')); ?>">
+                                            </span>
                                         </div>
                                     </div>
@@ -300 +376 @@
                         <?php settings_fields('prodshow_settings'); ?>
 
-                        <!-- Shopify API Configuration Section -->
-                        <div class="prodshow-section">
+                        <!-- Shopify Connection Section (OAuth) -->
+                        <div class="prodshow-section" id="prodshow-oauth-section">
                             <div class="prodshow-section-header">
-                                <h2><?php esc_html_e('Shopify API Configuration', 'products-showcase'); ?></h2>
-                                <p><?php esc_html_e('Connect your WordPress site to your Shopify store by providing the necessary API credentials.', 'products-showcase'); ?></p>
+                                <h2><?php esc_html_e('Connect to Shopify', 'products-showcase'); ?></h2>
+                                <p><?php esc_html_e('Connect your WordPress site to your Shopify store using secure OAuth authentication. Just enter your app credentials and click connect!', 'products-showcase'); ?></p>
                             </div>
 
-                            <table class="form-table" role="presentation">
-                                <tbody>
-                                    <tr>
-                                        <th scope="row">
-                                            <label for="prodshow_shopify_url"><?php esc_html_e('Shopify Store URL', 'products-showcase'); ?></label>
-                                        </th>
-                                        <td>
-                                            <input type="text" 
-                                                     id="prodshow_shopify_url"
-                                                     name="prodshow_shopify_url"
-                                                     value="<?php echo esc_attr(get_option('prodshow_shopify_url')); ?>"
-                                                     class="regular-text"
-                                                     placeholder="your-store.myshopify.com">
-                                            <p class="description">
-                                                <?php esc_html_e('Your Shopify store URL (without https://). Example: my-store.myshopify.com', 'products-showcase'); ?>
-                                            </p>
-                                        </td>
-                                    </tr>
-
-                                    <tr>
-                                        <th scope="row">
-                                            <label for="prodshow_shopify_access_token"><?php esc_html_e('Admin API Access Token', 'products-showcase'); ?></label>
-                                        </th>
-                                        <td>
-                                            <input type="password" 
-                                                     id="prodshow_shopify_access_token"
-                                                     name="prodshow_shopify_access_token"
-                                                     value="<?php echo esc_attr(get_option('prodshow_shopify_access_token')); ?>"
-                                                     class="regular-text"
-                                                     autocomplete="off">
-                                            <p class="description">
-                                                <?php
-                                                echo wp_kses(
-                                                    __('Generate from <strong>Shopify Admin → Settings → Apps and sales channels → Develop apps</strong>. Required scopes: <code>read_products</code>', 'products-showcase'),
-                                                    array(
-                                                        'strong' => array(),
-                                                        'code' => array(),
-                                                    )
-                                                );
-                                                ?>
-                                                <br>
-                                                <a href="https://shopify.dev/docs/apps/auth/admin-app-access-tokens" target="_blank" rel="noopener noreferrer">
-                                                    <?php esc_html_e('Learn how to create an access token →', 'products-showcase'); ?>
-                                                </a>
-                                            </p>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
+                            <?php if ($is_oauth_connected && $connection_status['success']): ?>
+                                <!-- Already connected via OAuth - show minimal info -->
+                                <div class="prodshow-oauth-connected-info">
+                                    <p class="prodshow-oauth-status">
+                                        <span class="dashicons dashicons-yes-alt" style="color: #28a745;"></span>
+                                        <?php esc_html_e('Connected via OAuth', 'products-showcase'); ?>
+                                    </p>
+                                    <button type="button" id="prodshow-disconnect-btn" class="button button-secondary">
+                                        <?php esc_html_e('Disconnect', 'products-showcase'); ?>
+                                    </button>
+                                    <input type="hidden" id="prodshow-oauth-nonce" value="<?php echo esc_attr(wp_create_nonce('prodshow_oauth_nonce')); ?>">
+                                    <!-- Preserve OAuth credentials when saving other settings -->
+                                    <input type="hidden" name="prodshow_shopify_url" value="<?php echo esc_attr(get_option('prodshow_shopify_url')); ?>">
+                                    <input type="hidden" name="prodshow_shopify_client_id" value="<?php echo esc_attr(get_option('prodshow_shopify_client_id')); ?>">
+                                    <input type="hidden" name="prodshow_shopify_client_secret" value="<?php echo esc_attr(get_option('prodshow_shopify_client_secret')); ?>">
+                                    <input type="hidden" name="prodshow_shopify_access_token" value="<?php echo esc_attr(get_option('prodshow_shopify_access_token')); ?>">
+                                </div>
+                            <?php else: ?>
+                                <table class="form-table" role="presentation">
+                                    <tbody>
+                                        <tr>
+                                            <th scope="row">
+                                                <label for="prodshow_shopify_url"><?php esc_html_e('Shopify Store URL', 'products-showcase'); ?> <span class="required">*</span></label>
+                                            </th>
+                                            <td>
+                                                <input type="text" 
+                                                         id="prodshow_shopify_url"
+                                                         name="prodshow_shopify_url"
+                                                         value="<?php echo esc_attr(get_option('prodshow_shopify_url')); ?>"
+                                                         class="regular-text"
+                                                         placeholder="your-store.myshopify.com"
+                                                         required>
+                                                <p class="description">
+                                                    <?php esc_html_e('Your Shopify store URL (without https://). Example: my-store.myshopify.com', 'products-showcase'); ?>
+                                                </p>
+                                            </td>
+                                        </tr>
+
+                                        <tr>
+                                            <th scope="row">
+                                                <label for="prodshow_shopify_client_id"><?php esc_html_e('Client ID', 'products-showcase'); ?> <span class="required">*</span></label>
+                                            </th>
+                                            <td>
+                                                <input type="text" 
+                                                         id="prodshow_shopify_client_id"
+                                                         name="prodshow_shopify_client_id"
+                                                         value="<?php echo esc_attr(get_option('prodshow_shopify_client_id')); ?>"
+                                                         class="regular-text"
+                                                         placeholder="e.g., 1234567890abcdef..."
+                                                         autocomplete="off"
+                                                         required>
+                                                <p class="description">
+                                                    <?php esc_html_e('Found in your Shopify app settings under "API credentials" → "Client ID"', 'products-showcase'); ?>
+                                                </p>
+                                            </td>
+                                        </tr>
+
+                                        <tr>
+                                            <th scope="row">
+                                                <label for="prodshow_shopify_client_secret"><?php esc_html_e('Client Secret', 'products-showcase'); ?> <span class="required">*</span></label>
+                                            </th>
+                                            <td>
+                                                <input type="password" 
+                                                         id="prodshow_shopify_client_secret"
+                                                         name="prodshow_shopify_client_secret"
+                                                         value="<?php echo esc_attr(get_option('prodshow_shopify_client_secret')); ?>"
+                                                         class="regular-text"
+                                                         placeholder="e.g., shpss_..."
+                                                         autocomplete="off"
+                                                         required>
+                                                <p class="description">
+                                                    <?php esc_html_e('Found in your Shopify app settings under "API credentials" → "Client secret"', 'products-showcase'); ?>
+                                                </p>
+                                            </td>
+                                        </tr>
+
+                                        <tr>
+                                            <th scope="row">
+                                                <label><?php esc_html_e('Redirect URL', 'products-showcase'); ?></label>
+                                            </th>
+                                            <td>
+                                                <div class="prodshow-redirect-url-box">
+                                                    <code id="prodshow-redirect-url"><?php echo esc_html(PRODSHOW_Shopify_OAuth::get_redirect_uri()); ?></code>
+                                                    <button type="button" id="prodshow-copy-redirect-url" class="button button-small" title="<?php esc_attr_e('Copy to clipboard', 'products-showcase'); ?>">
+                                                        <span class="dashicons dashicons-clipboard"></span>
+                                                    </button>
+                                                </div>
+                                                <p class="description">
+                                                    <?php esc_html_e('Copy this URL and paste it in your Shopify app\'s "Allowed redirection URL(s)" field.', 'products-showcase'); ?>
+                                                </p>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+
+                                <div class="prodshow-oauth-actions">
+                                    <button type="button" id="prodshow-connect-btn" class="button button-primary button-large prodshow-connect-button">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+                                            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+                                        </svg>
+                                        <?php esc_html_e('Connect to Shopify', 'products-showcase'); ?>
+                                    </button>
+                                    <span class="prodshow-oauth-spinner spinner"></span>
+                                </div>
+
+                                <input type="hidden" id="prodshow-oauth-nonce" value="<?php echo esc_attr(wp_create_nonce('prodshow_oauth_nonce')); ?>">
+                            <?php endif; ?>
                         </div>
 

products-showcase/trunk/products-showcase.php

@@ -4 +4 @@
  * Plugin URI: https://github.com/HosseinKarami/products-showcase
  * Description: Display Shopify products and collections in beautiful carousels using native Gutenberg blocks. Features product filtering, color swatches, and responsive design.
- * Version: 1.0.0
+ * Version: 1.1.0
  * Requires at least: 6.0
  * Requires PHP: 8.1
@@ -23 +23 @@
 
 // Plugin constants.
-define( 'PRODSHOW_VERSION', '1.0.0' );
+define( 'PRODSHOW_VERSION', '1.1.0' );
 define( 'PRODSHOW_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
 define( 'PRODSHOW_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
 define( 'PRODSHOW_PLUGIN_BASENAME', plugin_basename( __FILE__ ) );
-define( 'PRODSHOW_SHOPIFY_API_VERSION', '2025-10' ); // Shopify Admin API version.
+define( 'PRODSHOW_SHOPIFY_API_VERSION_FALLBACK', '2025-10' ); // Fallback Shopify Admin API version.
+
+/**
+ * Get the Shopify API version to use
+ * 
+ * Returns the dynamically detected version if available, otherwise falls back to default.
+ *
+ * @return string The API version to use (e.g., '2025-10')
+ */
+function prodshow_get_api_version() {
+    $stored_version = get_option( 'prodshow_shopify_api_version', '' );
+    
+    if ( ! empty( $stored_version ) ) {
+        return $stored_version;
+    }
+    
+    return PRODSHOW_SHOPIFY_API_VERSION_FALLBACK;
+}
+
+// For backwards compatibility, define the constant using the dynamic function
+// Note: This runs early, so it will use the stored value or fallback
+if ( ! defined( 'PRODSHOW_SHOPIFY_API_VERSION' ) ) {
+    // We can't call prodshow_get_api_version() before plugins_loaded in some cases,
+    // so we check the option directly here
+    $_prodshow_api_version = get_option( 'prodshow_shopify_api_version', '' );
+    if ( empty( $_prodshow_api_version ) ) {
+        $_prodshow_api_version = PRODSHOW_SHOPIFY_API_VERSION_FALLBACK;
+    }
+    define( 'PRODSHOW_SHOPIFY_API_VERSION', $_prodshow_api_version );
+    unset( $_prodshow_api_version );
+}
 
 /**
@@ -37 +67 @@
     require_once PRODSHOW_PLUGIN_DIR . 'includes/class-shopify-block.php';
     require_once PRODSHOW_PLUGIN_DIR . 'includes/class-shopify-graphql-types.php';
+    require_once PRODSHOW_PLUGIN_DIR . 'includes/class-shopify-oauth.php';
     require_once PRODSHOW_PLUGIN_DIR . 'includes/class-admin-settings.php';
     require_once PRODSHOW_PLUGIN_DIR . 'includes/class-enqueue-assets.php';
@@ -45 +76 @@
     new PRODSHOW_Shopify_Block();
     new PRODSHOW_Shopify_GraphQL_Types();
+    new PRODSHOW_Shopify_OAuth();
     new PRODSHOW_Admin_Settings();
     new PRODSHOW_Enqueue_Assets();
     new PRODSHOW_REST_API();
+
+    // Auto-detect API version if connected but no version stored yet
+    add_action( 'admin_init', 'prodshow_maybe_detect_api_version' );
 }
 add_action( 'plugins_loaded', 'prodshow_init' );
+
+/**
+ * Detect and store API version if connected but not yet detected
+ * 
+ * This runs once when an existing connection doesn't have a stored API version.
+ */
+function prodshow_maybe_detect_api_version() {
+    // Only run once per day to avoid excessive API calls
+    $last_check = get_transient( 'prodshow_api_version_check' );
+    if ( $last_check ) {
+        return;
+    }
+
+    // Check if we have a connection but no stored API version
+    $shop_url = get_option( 'prodshow_shopify_url', '' );
+    $access_token = get_option( 'prodshow_shopify_access_token', '' );
+    $stored_version = get_option( 'prodshow_shopify_api_version', '' );
+
+    // If we have credentials but no stored version, try to detect it
+    if ( ! empty( $shop_url ) && ! empty( $access_token ) && empty( $stored_version ) ) {
+        $detected_version = PRODSHOW_Shopify_OAuth::get_latest_api_version( $shop_url, $access_token );
+        
+        if ( $detected_version ) {
+            update_option( 'prodshow_shopify_api_version', $detected_version );
+        }
+    }
+
+    // Set transient to prevent checking again for 24 hours
+    set_transient( 'prodshow_api_version_check', true, DAY_IN_SECONDS );
+}
 
 /**

products-showcase/trunk/readme.txt

@@ -1 +1 @@
 === Products Showcase – Shopify Integration ===
 Contributors: hosseinkarami
-Donate link: https://buymeacoffee.com/hosseinkarami?utm_source=wordpress&utm_medium=readme&utm_campaign=products-showcase&utm_content=readme-donate
 Tags: shopify, ecommerce, products, gutenberg, blocks
 Requires at least: 6.0
 Tested up to: 6.9
-Stable tag: 1.0.0
+Stable tag: 1.1.0
 Requires PHP: 8.1
 License: GPLv2 or later
@@ -22 +21 @@
 
 To build from source:
-`
-    npm install
-    npm run build
-`
+```
+npm install
+npm run build
+```
 
 For development with hot reloading:
-`
-    npm start
-`
+```
+npm start
+```
 
 == Description ==
@@ -82 +81 @@
 **Data Transmitted to Shopify**:
 1. **Shopify Store URL** - Your store's domain (e.g., `your-store.myshopify.com`) configured in plugin settings
-2. **Admin API Access Token** - Your Shopify Admin API authentication token (configured in plugin settings)
-3. **GraphQL Queries** - Specific queries requesting product and collection data
+2. **OAuth Credentials** - Client ID and Client Secret are used during the one-time OAuth authorization flow
+3. **Admin API Access Token** - Obtained automatically via OAuth and used for all subsequent API requests
+4. **GraphQL Queries** - Specific queries requesting product and collection data
 
 **When Data is Transmitted**:
@@ -146 +146 @@
 5. Activate the plugin in WordPress
 
-= Getting Your Shopify API Credentials =
+= Creating Your Shopify App =
 
 1. Log in to your Shopify Admin
 2. Go to Settings → Apps and sales channels
 3. Click "Develop apps"
-4. Create a new app or select an existing one
-5. Configure Admin API scopes (required: `read_products`)
-6. Install the app to your store
-7. Copy the Admin API access token
-8. Paste it into the plugin settings at Settings → Shopify Products
+4. Click "Create an app" and name it (e.g., "WordPress Integration")
+5. Go to the "Configuration" tab
+6. Under "Admin API integration", click "Configure"
+7. Enable the `read_products` scope and save
+8. Under "Allowed redirection URL(s)", add the Redirect URL shown in your WordPress plugin settings
+9. Go to the "API credentials" tab
+10. Copy the **Client ID** and **Client secret**
 
 == Configuration ==
 
-= Plugin Settings =
-
-1. Navigate to **Settings → Shopify Products** in WordPress admin
+= Easy OAuth Setup =
+
+1. Navigate to **Shopify Products** in WordPress admin
 2. Enter your **Shopify Store URL** (e.g., `your-store.myshopify.com`)
-3. Paste your **Admin API Access Token**
-4. Set **Cache Duration** (default: 1 hour, recommended to reduce API calls)
-5. Click **Save Settings**
-
-The plugin will automatically test the connection and display a success message if configured correctly.
+3. Paste your **Client ID** from Shopify
+4. Paste your **Client Secret** from Shopify
+5. Click **"Connect to Shopify"**
+6. You'll be redirected to Shopify to authorize the connection
+7. After authorizing, you're automatically redirected back - done!
+
+The plugin automatically obtains the access token via secure OAuth and detects the latest Shopify API version.
 
 == Usage ==
@@ -218 +222 @@
 
 Target these CSS classes for custom styling:
-`
-    /* Container */
-    .wp-block-products-showcase-products { }
-    .prodshow-shopify-block { }
-    .prodshow-container { }
-
-    /* Header */
-    .prodshow-title { }
-    .prodshow-description { }
-    .prodshow-cta-button { }
-
-    /* Carousel */
-    .prodshow-carousel { }
-    .prodshow-carousel-viewport { }
-    .prodshow-carousel-container { }
-    .prodshow-carousel-btn { }
-
-    /* Product Cards */
-    .prodshow-product-card { }
-    .prodshow-product-image { }
-    .prodshow-product-title { }
-    .prodshow-product-price { }
-    .prodshow-product-swatches { }
-    .prodshow-swatch { }
-
-    /* Single Product Layout */
-    .prodshow-single-product { }
-    .prodshow-single-info { }
-`
+
+```css
+/* Container */
+.wp-block-products-showcase-products { }
+.prodshow-shopify-block { }
+.prodshow-container { }
+
+/* Header */
+.prodshow-title { }
+.prodshow-description { }
+.prodshow-cta-button { }
+
+/* Carousel */
+.prodshow-carousel { }
+.prodshow-carousel-viewport { }
+.prodshow-carousel-container { }
+.prodshow-carousel-btn { }
+
+/* Product Cards */
+.prodshow-product-card { }
+.prodshow-product-image { }
+.prodshow-product-title { }
+.prodshow-product-price { }
+.prodshow-product-swatches { }
+.prodshow-swatch { }
+
+/* Single Product Layout */
+.prodshow-single-product { }
+.prodshow-single-info { }
+```
 
 = Template Overrides =
 
 Copy templates to your theme for customization:
-`
-    your-theme/
-      products-showcase/
-        block-template.php
-        product-card.php
-`
+
+```
+your-theme/
+  products-showcase/
+    block-template.php
+    product-card.php
+```
 
 The plugin will automatically use your theme templates if they exist.
@@ -275 +281 @@
 
 Modify cache duration:
-`
-    add_filter('prodshow_cache_duration', function($duration) {
-        return 2 * HOUR_IN_SECONDS;
-    });
-`
+```php
+add_filter('prodshow_cache_duration', function($duration) {
+    return 2 * HOUR_IN_SECONDS;
+});
+```
 
 Customize product data before display:
-`
-    add_filter('prodshow_product_data', function($product) {
-        // Modify product data
-        return $product;
-    }, 10, 1);
-`
+```php
+add_filter('prodshow_product_data', function($product) {
+    // Modify product data
+    return $product;
+}, 10, 1);
+```
 
 Add custom product filtering:
-`
-    add_filter('prodshow_filter_products', function($products) {
-        // Filter products array
-        return $products;
-    }, 10, 1);
-`
+```php
+add_filter('prodshow_filter_products', function($products) {
+    // Filter products array
+    return $products;
+}, 10, 1);
+```
 
 = Programmatic Usage =
-`
-    // Get Shopify API instance
-    $shopify_api = new PRODSHOW_Shopify_API();
-
-    // Search products
-    $products = $shopify_api->search_products('shirt');
-
-    // Search collections
-    $collections = $shopify_api->search_collections('summer');
-
-    // Fetch product data
-    $product = $shopify_api->fetch_product_data('gid://shopify/Product/123456');
-
-    // Fetch collection products  
-    $products = $shopify_api->fetch_collection_products('gid://shopify/Collection/789', 12);
-`
+
+```php
+// Get Shopify API instance
+$shopify_api = new PRODSHOW_Shopify_API();
+
+// Search products
+$products = $shopify_api->search_products('shirt');
+
+// Search collections
+$collections = $shopify_api->search_collections('summer');
+
+// Fetch product data
+$product = $shopify_api->fetch_product_data('gid://shopify/Product/123456');
+
+// Fetch collection products  
+$products = $shopify_api->fetch_collection_products('gid://shopify/Collection/789', 12);
+```
 
 = Build Scripts =
-`
-    # Development - watch for changes
-    npm start
-
-    # Production build
-    npm run build
-
-    # Linting
-    npm run lint:js        # Lint JavaScript
-    npm run lint:css       # Lint styles
-    npm run lint:pkg-json  # Lint package.json
-
-    # Formatting
-    npm run format         # Auto-fix code style
-
-    # Create plugin zip
-    npm run plugin-zip
-`    
+
+```bash
+# Development - watch for changes
+npm start
+
+# Production build
+npm run build
+
+# Linting
+npm run lint:js        # Lint JavaScript
+npm run lint:css       # Lint styles
+npm run lint:pkg-json  # Lint package.json
+
+# Formatting
+npm run format         # Auto-fix code style
+
+# Create plugin zip
+npm run plugin-zip
+```
 
 == Frequently Asked Questions ==
@@ -367 +375 @@
 = What happens if my Shopify API credentials change? =
 
-Simply update the credentials in Settings → Shopify Products. The plugin will automatically use the new credentials for all future API requests.
+Click the "Disconnect" button in Shopify Products settings, then reconnect using the OAuth flow with your new credentials. The plugin will automatically obtain a new access token.
 
 = Can I filter out certain products? =
@@ -401 +409 @@
 1. Ensure Node.js 18+ is installed
 2. Clean install:
-`
-    rm -rf node_modules package-lock.json
-    npm install
-    npm run build
-`
-
+   ```
+   rm -rf node_modules package-lock.json
+   npm install
+   npm run build
+   ```
 3. Check @wordpress/scripts version compatibility
 
@@ -419 +426 @@
 
 == Changelog ==
+
+= 1.1.0 =
+* **NEW: OAuth 2.0 Authentication** - Easy one-click connection to Shopify using secure OAuth flow
+* **NEW: Auto API Version Detection** - Automatically detects and uses the latest Shopify API version
+* **NEW: Simplified Setup** - No more manual access token copying - just enter Client ID & Secret and click Connect
+* **NEW: Disconnect/Reconnect** - Easy way to change Shopify credentials
+* **NEW: Refresh API Version** - Button to manually refresh the detected API version
+* Improved admin UI with better connection status display
+* Enhanced security with OAuth state validation
 
 = 1.0.0 =
@@ -437 +453 @@
 == Upgrade Notice ==
 
+= 1.1.0 =
+Major update! Now featuring OAuth 2.0 authentication - no more manual token copying. Just enter your Client ID & Secret and click Connect. Existing connections will continue to work.
+
 = 1.0.0 =
 Initial release of Products Showcase – Shopify Integration. Display your Shopify products beautifully on WordPress!