southseact-3d/shopify-ai-backup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added scroll to bottom template

Browse Source
This commit is contained in:
southseact-3d
2026-02-16 13:42:05 +00:00
parent 9a325df739
commit c2e5980a8b
8 changed files with 661 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/README.md Normal file
View File

@@ -0,0 +1,36 @@
# Scroll to Top - WordPress Plugin
A customizable scroll-to-top button for WordPress websites.
## Installation
1. Upload the `scroll-to-top-qg1e` folder to your WordPress `/wp-content/plugins/` directory
2. Activate the plugin through the "Plugins" menu in WordPress
3. Configure settings via **Settings > Scroll to Top**
## Features
- **Three Button Styles**: Circle, Arrow, or Text ("Top")
- **Custom Colors**: Choose background and text/icon colors
- ** Adjustable Size**: Small, Medium, or Large
- **Position Options**: Bottom-right or Bottom-left
- **Mobile Toggle**: Show or hide on mobile devices
- **Smooth Scrolling**: Animated scroll to top
- **Live Preview**: See changes in real-time in the admin panel
## How It Works
The button appears automatically when visitors scroll down the page (after 200px). Clicking it smoothly scrolls to the top of the page.
## Files
- `scroll-to-top.php` - Main plugin file
- `admin/settings-page.php` - Settings page HTML
- `assets/admin.css` - Admin panel styles
- `assets/admin.js` - Admin panel JavaScript with live preview
- `assets/frontend.css` - Frontend button styles
- `assets/frontend.js` - Frontend scroll functionality
## License
GPL v2 or later

105
chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/admin/settings-page.php Normal file
View File

@@ -0,0 +1,105 @@
<?php
$settings = array(
'style' => get_option('scroll_to_top_style', 'circle'),
'bg_color' => get_option('scroll_to_top_bg_color', '#333333'),
'text_color' => get_option('scroll_to_top_text_color', '#ffffff'),
'size' => get_option('scroll_to_top_size', 'medium'),
'position' => get_option('scroll_to_top_position', 'bottom-right'),
'show_mobile' => get_option('scroll_to_top_show_mobile', '1'),
);
?>
<div class="wrap">
<h1><?php echo esc_html(get_admin_page_title()); ?></h1>
<form method="post" action="options.php">
<?php settings_fields('scroll_to_top_options'); ?>
<table class="form-table">
<tr>
<th scope="row">Button Style</th>
<td>
<fieldset>
<label>
<input type="radio" name="scroll_to_top_style" value="circle" <?php checked($settings['style'], 'circle'); ?>>
Circle
</label><br>
<label>
<input type="radio" name="scroll_to_top_style" value="arrow" <?php checked($settings['style'], 'arrow'); ?>>
Arrow
</label><br>
<label>
<input type="radio" name="scroll_to_top_style" value="text" <?php checked($settings['style'], 'text'); ?>>
Text ("Top")
</label>
</fieldset>
</td>
</tr>
<tr>
<th scope="row">Background Color</th>
<td>
<input type="color" name="scroll_to_top_bg_color" value="<?php echo esc_attr($settings['bg_color']); ?>" class="color-picker">
</td>
</tr>
<tr>
<th scope="row">Icon/Text Color</th>
<td>
<input type="color" name="scroll_to_top_text_color" value="<?php echo esc_attr($settings['text_color']); ?>" class="color-picker">
</td>
</tr>
<tr>
<th scope="row">Button Size</th>
<td>
<select name="scroll_to_top_size">
<option value="small" <?php selected($settings['size'], 'small'); ?>>Small</option>
<option value="medium" <?php selected($settings['size'], 'medium'); ?>>Medium</option>
<option value="large" <?php selected($settings['size'], 'large'); ?>>Large</option>
</select>
</td>
</tr>
<tr>
<th scope="row">Button Position</th>
<td>
<select name="scroll_to_top_position">
<option value="bottom-right" <?php selected($settings['position'], 'bottom-right'); ?>>Bottom-Right</option>
<option value="bottom-left" <?php selected($settings['position'], 'bottom-left'); ?>>Bottom-Left</option>
</select>
</td>
</tr>
<tr>
<th scope="row">Show on Mobile</th>
<td>
<label>
<input type="checkbox" name="scroll_to_top_show_mobile" value="1" <?php checked($settings['show_mobile'], '1'); ?>>
Show on mobile devices
</label>
</td>
</tr>
</table>
<?php submit_button('Save Settings'); ?>
</form>
<h2>Preview</h2>
<div class="stt-preview-container">
<div class="stt-preview-box">
<p>Scroll down to see the button appear:</p>
<div class="stt-preview-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="stt-preview-button" class="scroll-to-top-button" aria-label="Scroll to top">
<span class="stt-button-content"></span>
</div>
</div>
</div>
</div>

97
chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/admin.css Normal file
View File

@@ -0,0 +1,97 @@
.stt-preview-container {
border: 1px solid #ddd;
padding: 20px;
margin-top: 20px;
border-radius: 4px;
background: #f9f9f9;
}
.stt-preview-box {
position: relative;
height: 200px;
overflow-y: auto;
border: 1px solid #ccc;
background: #fff;
padding: 15px;
font-size: 14px;
}
.stt-preview-content p {
margin-bottom: 10px;
}
.scroll-to-top-button {
position: fixed;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
cursor: pointer;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.scroll-to-top-button.visible {
opacity: 1;
visibility: visible;
}
.scroll-to-top-button.stt-style-circle {
border-radius: 50%;
}
.scroll-to-top-button.stt-style-arrow,
.scroll-to-top-button.stt-style-text {
border-radius: 4px;
}
.scroll-to-top-button.stt-size-small {
width: 40px;
height: 40px;
font-size: 16px;
}
.scroll-to-top-button.stt-size-medium {
width: 50px;
height: 50px;
font-size: 20px;
}
.scroll-to-top-button.stt-size-large {
width: 60px;
height: 60px;
font-size: 24px;
}
.scroll-to-top-button.stt-position-bottom-right {
right: 20px;
bottom: 20px;
}
.scroll-to-top-button.stt-position-bottom-left {
left: 20px;
bottom: 20px;
}
.stt-button-content {
pointer-events: none;
}
.stt-style-circle .stt-button-content::before {
content: '↑';
}
.stt-style-arrow .stt-button-content::before {
content: '↑';
}
.stt-style-text .stt-button-content::before {
content: 'Top';
font-weight: bold;
}
.color-picker {
width: 70px;
height: 35px;
}

67
chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/admin.js Normal file
View File

@@ -0,0 +1,67 @@
(function($) {
'use strict';
function updatePreview() {
const settings = {
style: $('input[name="scroll_to_top_style"]:checked').val(),
bgColor: $('input[name="scroll_to_top_bg_color"]').val(),
textColor: $('input[name="scroll_to_top_text_color"]').val(),
size: $('input[name="scroll_to_top_size"]').val(),
position: $('input[name="scroll_to_top_position"]').val(),
};
const $button = $('#stt-preview-button');
$button.css('background-color', settings.bgColor);
$button.css('color', settings.textColor);
$button.removeClass('stt-style-circle stt-style-arrow stt-style-text')
.addClass('stt-style-' + settings.style);
$button.removeClass('stt-size-small stt-size-medium stt-size-large')
.addClass('stt-size-' + settings.size);
$button.removeClass('stt-position-bottom-right stt-position-bottom-left')
.addClass('stt-position-' + settings.position);
}
$(document).ready(function() {
const $previewBox = $('.stt-preview-box');
const $button = $('#stt-preview-button');
updatePreview();
$('input[name="scroll_to_top_style"]').change(function() {
updatePreview();
});
$('input[name="scroll_to_top_bg_color"]').change(function() {
updatePreview();
});
$('input[name="scroll_to_top_text_color"]').change(function() {
updatePreview();
});
$('select[name="scroll_to_top_size"]').change(function() {
updatePreview();
});
$('select[name="scroll_to_top_position"]').change(function() {
updatePreview();
});
$previewBox.on('scroll', function() {
if ($previewBox.scrollTop() > 50) {
$button.addClass('visible');
} else {
$button.removeClass('visible');
}
});
$button.on('click', function(e) {
e.preventDefault();
$previewBox.animate({ scrollTop: 0 }, 300);
});
});
})(jQuery);

120
chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/frontend.css Normal file
View File

@@ -0,0 +1,120 @@
.scroll-to-top-button {
position: fixed;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
cursor: pointer;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.scroll-to-top-button:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.scroll-to-top-button.visible {
opacity: 1;
visibility: visible;
}
.scroll-to-top-button.stt-style-circle {
border-radius: 50%;
}
.scroll-to-top-button.stt-style-arrow,
.scroll-to-top-button.stt-style-text {
border-radius: 4px;
}
.scroll-to-top-button.stt-size-small {
width: 40px;
height: 40px;
font-size: 16px;
}
.scroll-to-top-button.stt-size-medium {
width: 50px;
height: 50px;
font-size: 20px;
}
.scroll-to-top-button.stt-size-large {
width: 60px;
height: 60px;
font-size: 24px;
}
.scroll-to-top-button.stt-position-bottom-right {
right: 20px;
bottom: 20px;
left: auto;
}
.scroll-to-top-button.stt-position-bottom-left {
left: 20px;
bottom: 20px;
right: auto;
}
.stt-button-content {
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
.stt-style-circle .stt-button-content::before {
content: '↑';
}
.stt-style-arrow .stt-button-content::before {
content: '↑';
}
.stt-style-text .stt-button-content::before {
content: 'Top';
font-weight: bold;
}
.scroll-to-top-button.stt-hide-mobile {
display: none;
}
@media screen and (max-width: 768px) {
.scroll-to-top-button.stt-size-small {
width: 35px;
height: 35px;
font-size: 14px;
}
.scroll-to-top-button.stt-size-medium {
width: 45px;
height: 45px;
font-size: 18px;
}
.scroll-to-top-button.stt-size-large {
width: 50px;
height: 50px;
font-size: 20px;
}
.scroll-to-top-button.stt-position-bottom-right {
right: 15px;
bottom: 15px;
}
.scroll-to-top-button.stt-position-bottom-left {
left: 15px;
bottom: 15px;
}
}
@media screen and (min-width: 769px) {
.scroll-to-top-button.stt-hide-mobile {
display: flex;
}
}

90
chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/frontend.js Normal file
View File

@@ -0,0 +1,90 @@
(function() {
'use strict';
if (typeof scrollToTopSettings === 'undefined') {
return;
}
const settings = scrollToTopSettings;
let button = null;
let scrollTimeout = null;
function createButton() {
button = document.createElement('div');
button.className = 'scroll-to-top-button';
button.setAttribute('aria-label', 'Scroll to top');
button.classList.add('stt-style-' + settings.style);
button.classList.add('stt-size-' + settings.size);
button.classList.add('stt-position-' + settings.position);
if (!settings.showMobile) {
button.classList.add('stt-hide-mobile');
}
const content = document.createElement('span');
content.className = 'stt-button-content';
button.appendChild(content);
document.body.appendChild(button);
applyStyles();
addEventListeners();
}
function applyStyles() {
if (!button) return;
button.style.backgroundColor = settings.bgColor;
button.style.color = settings.textColor;
if (settings.position === 'bottom-right') {
button.style.right = '20px';
button.style.left = 'auto';
} else {
button.style.left = '20px';
button.style.right = 'auto';
}
}
function handleScroll() {
if (!button) return;
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(function() {
if (window.scrollY > 200) {
button.classList.add('visible');
} else {
button.classList.remove('visible');
}
}, 10);
}
function scrollToTop(e) {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
function addEventListeners() {
if (!button) return;
window.addEventListener('scroll', handleScroll, { passive: true });
button.addEventListener('click', scrollToTop);
}
function init() {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', createButton);
} else {
createButton();
}
}
init();
})();

146
chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/scroll-to-top.php Normal file
View File

@@ -0,0 +1,146 @@
<?php
/**
* Plugin Name: Scroll to Top
* Description: A customizable scroll-to-top button that appears when visitors scroll down the page.
* Version: 1.0.1
* Author: WordPress
* Text Domain: scroll-to-top
* License: GPL v2 or later
*/
defined('ABSPATH') || exit;
class Scroll_To_Top {
private static $instance = null;
public static $plugin_dir;
public static $plugin_url;
public static function get_instance() {
if (null === self::$instance) {
self::$instance = new self();
}
return self::$instance;
}
public function __construct() {
self::$plugin_dir = plugin_dir_path(__FILE__);
self::$plugin_url = plugin_dir_url(__FILE__);
add_action('admin_menu', array($this, 'add_admin_menu'));
add_action('admin_init', array($this, 'register_settings'));
add_action('wp_enqueue_scripts', array($this, 'enqueue_frontend_assets'));
add_action('admin_enqueue_scripts', array($this, 'enqueue_admin_assets'));
}
public function add_admin_menu() {
add_options_page(
'Scroll to Top Settings',
'Scroll to Top',
'manage_options',
'scroll-to-top-settings',
array($this, 'render_settings_page')
);
}
public function register_settings() {
register_setting('scroll_to_top_options', 'scroll_to_top_style', array(
'default' => 'circle',
'sanitize_callback' => 'sanitize_text_field'
));
register_setting('scroll_to_top_options', 'scroll_to_top_bg_color', array(
'default' => '#333333',
'sanitize_callback' => 'sanitize_hex_color'
));
register_setting('scroll_to_top_options', 'scroll_to_top_text_color', array(
'default' => '#ffffff',
'sanitize_callback' => 'sanitize_hex_color'
));
register_setting('scroll_to_top_options', 'scroll_to_top_size', array(
'default' => 'medium',
'sanitize_callback' => 'sanitize_text_field'
));
register_setting('scroll_to_top_options', 'scroll_to_top_position', array(
'default' => 'bottom-right',
'sanitize_callback' => 'sanitize_text_field'
));
register_setting('scroll_to_top_options', 'scroll_to_top_show_mobile', array(
'default' => '1',
'sanitize_callback' => 'rest_sanitize_boolean'
));
}
public function render_settings_page() {
if (!current_user_can('manage_options')) {
return;
}
include self::$plugin_dir . 'admin/settings-page.php';
}
public function enqueue_frontend_assets() {
$settings = $this->get_settings();
wp_enqueue_style(
'scroll-to-top-styles',
self::$plugin_url . 'assets/frontend.css',
array(),
'1.0.0'
);
wp_enqueue_script(
'scroll-to-top-script',
self::$plugin_url . 'assets/frontend.js',
array(),
'1.0.0',
true
);
wp_localize_script('scroll-to-top-script', 'scrollToTopSettings', array(
'style' => $settings['style'],
'bgColor' => $settings['bg_color'],
'textColor' => $settings['text_color'],
'size' => $settings['size'],
'position' => $settings['position'],
'showMobile' => $settings['show_mobile'],
));
}
public function enqueue_admin_assets($hook) {
if ('settings_page_scroll-to-top-settings' !== $hook) {
return;
}
wp_enqueue_style(
'scroll-to-top-admin-styles',
self::$plugin_url . 'assets/admin.css',
array(),
'1.0.0'
);
wp_enqueue_script(
'scroll-to-top-admin-script',
self::$plugin_url . 'assets/admin.js',
array(),
'1.0.0',
true
);
}
private function get_settings() {
return array(
'style' => get_option('scroll_to_top_style', 'circle'),
'bg_color' => get_option('scroll_to_top_bg_color', '#333333'),
'text_color' => get_option('scroll_to_top_text_color', '#ffffff'),
'size' => get_option('scroll_to_top_size', 'medium'),
'position' => get_option('scroll_to_top_position', 'bottom-right'),
'show_mobile' => get_option('scroll_to_top_show_mobile', '1'),
);
}
}
Scroll_To_Top::get_instance();