Merge pull request 'updating docs and settings for release' (#1) from update-documentation into main

Reviewed-on: CyberCoveLLC/fourth-wall-embed-wp#1

.gitea/workflows/release.yml

@@ -0,0 +1,38 @@
+name: Create Release
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          username: ${{ secrets.CI_USER }}
+          password: ${{ secrets.CI_TOKEN }}
+
+      - name: Get version
+        id: get_version
+        run: |
+          if [ "${{ github.ref_type }}" = "tag" ]; then
+            echo "version=${GITHUB_REF#refs/tags/}" >> $GITHUB_OUTPUT
+          else
+            echo "version=$(date +'%Y.%m.%d-%H%M')" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Create ZIP archive
+        run: |
+          zip -r fourthwall-store-embed.zip . -x ".git/*" ".gitea/*"
+
+      - name: Create Release
+        uses: softprops/action-gh-release@v2
+        with:
+          token: "${{ secrets.REPO_TOKEN }}"
+          title: Fourthwall-store-embed Release ${{ steps.get_version.outputs.version }}
+          tag_name: ${{ steps.get_version.outputs.version }}
+          files: |
+            fourthwall-store-embed.zip

README.md

@@ -1,3 +1,12 @@
 # fourth-wall-embed-wp
 
-A WordPress Plugin to embed a fourth wall embed
+A WordPress Plugin to embed a fourth wall embed.
+
+### How to use the plugin
+
+* Download the latest release from [releases](https://repo.anhonesthost.net/CyberCoveLLC/fourth-wall-embed-wp/releases)
+* Upload the Plugin to WordPress
+* In the WordPress Dashboard, Navigate to the Fourthwall settings page, and paste your store url.
+* On the page you want have your store displayed, add the shortcode ```[fourthwall]```
+
+This is an early release of the plugin, and if you can think of things that could be improved or find any bugs, please open an issue on the repository.

css/fw-store-embed.css

@@ -0,0 +1,42 @@
+.fw-store-parent {
+    align-content: center;
+    vertical-align: bottom;
+    overflow-y: auto;
+    text-align:center;
+    margin:0 auto;
+    max-width: 1000px;
+}
+
+.product-tile {
+    align-content: center;
+    vertical-align: bottom;
+    background: white;
+    display:inline-block;
+    width:225px;
+    margin:15px 15px 15px 15px;
+
+}
+
+.product-tile img {
+    max-height: 350px;
+}
+
+.image__badges {
+    color: red;
+    justify-content: center;
+    position: absolute;
+    font-weight: bold;
+    margin: auto;
+}
+.badge {
+    color: red !important;
+    margin: auto;
+    padding: 60px;
+    font-size: 20px;
+    font-style: italic;
+}
+
+.tile__heading {
+    font-size: 0.88em;  /* Reduced font size for product titles */
+    font-weight: bold;
+}

fw-store-embed.php

@@ -0,0 +1,18 @@
+<?php
+/**
+ * Plugin Name: Fourthwall Store Embed
+ * Plugin URL: https://cybercove.io/
+ * Description: Embed Fourthwall Store in WordPress
+ * Version: 1.0.0.
+ * Author: Joshua Knapp
+ * Text Domain: fourthwall_text_domain
+ *
+ */
+
+include("libs/settings.php");
+include("libs/shortcode.php");
+function set_fw_store_embed_css() {
+    wp_enqueue_style('fw-embed-style', plugin_dir_url( __FILE__ ). 'css/fw-store-embed.css', array(),null);
+}
+
+add_action( 'wp_enqueue_scripts', 'set_fw_store_embed_css' );

libs/settings.php

@@ -0,0 +1,88 @@
+<?php
+
+class fourthwall_settings {
+
+	public function __construct() {
+
+		add_action( 'admin_menu', array( $this, 'add_admin_menu' ) );
+		add_action( 'admin_init', array( $this, 'init_settings'  ) );
+
+	}
+
+	public function add_admin_menu() {
+
+		add_menu_page(
+			esc_html__( 'Fourthwall Store Embed', 'fourthwall_text_domain' ),
+			esc_html__( 'FourthWall Embed', 'fourthwall_text_domain' ),
+			'manage_options',
+			'fwembed',
+			array( $this, 'fourthwall_page_layout' ),
+			'dashicons-store',
+			10
+		);
+
+	}
+
+	public function init_settings() {
+
+		register_setting(
+			'fourthwall_settings_group',
+			'fourthwall_settings_name'
+		);
+
+		add_settings_section(
+			'fourthwall_settings_name_section',
+			'',
+			false,
+			'fourthwall_settings_name'
+		);
+
+		add_settings_field(
+			'fourth_url',
+			__( 'Store URL', 'fourthwall_text_domain' ),
+			array( $this, 'render_fourth_url_field' ),
+			'fourthwall_settings_name',
+			'fourthwall_settings_name_section'
+		);
+
+	}
+
+	public function fourthwall_page_layout() {
+
+		// Check required user capability
+		if ( !current_user_can( 'manage_options' ) )  {
+			wp_die( esc_html__( 'You do not have sufficient permissions to access this page.', 'fourthwall_text_domain' ) );
+		}
+
+		// Admin Page Layout
+		echo '<div class="wrap">' . "\n";
+		echo '	<h1>' . get_admin_page_title() . '</h1>' . "\n";
+		echo '	<form action="options.php" method="post">' . "\n";
+
+		settings_fields( 'fourthwall_settings_group' );
+		do_settings_sections( 'fourthwall_settings_name' );
+		submit_button();
+
+		echo '	</form>' . "\n";
+		echo ' <div><p>To use the fourthwall Embed, use the shortcode [fourthwall]</p></div>';
+		echo '</div>' . "\n";
+
+	}
+
+	function render_fourth_url_field() {
+
+		// Retrieve data from the database.
+		$options = get_option( 'fourthwall_settings_name' );
+
+		// Set default value.
+		$value = isset( $options['fourth_url'] ) ? $options['fourth_url'] : '';
+
+		// Field output.
+		echo '<input type="url" name="fourthwall_settings_name[fourth_url]" class="regular-text fourth_url_field" placeholder="' . esc_attr__( 'https://some-shop.fourthwall.com', 'fourthwall_text_domain' ) . '" value="' . esc_attr( $value ) . '">';
+		echo '<p class="description">' . __( 'The fourth wall URL', 'fourthwall_text_domain' ) . '</p>';
+
+	}
+
+}
+
+new fourthwall_settings;

libs/shortcode.php

@@ -0,0 +1,56 @@
+<?php
+
+function fwembed_parse_html($url = null) {
+  if ($url === null) {
+    throw new ValueError("Missing URL");
+  }
+  $html = null;
+  $dom = new DOMDocument();
+  @$dom->loadHTML(file_get_contents($url));
+  $dom->documentURI = $url;
+  $divs = $dom->getElementsByTagName('div');
+  foreach ($divs as $div) {
+    if ($div->hasAttribute('data-testid') && $div->getAttribute('data-testid') === 'product') {
+      $xpath = new DOMXPath($dom);
+
+      $tileLink = $xpath->query('.//a[contains(@class, "tile")]', $div);
+      $tileItem = $xpath->query('.//img[contains(@class, "tile__item--1")
+                                and not(contains(@class, "badge"))
+                                and not(contains(@class, "tile_options"))
+                                and not(contains(@class, "tile__item--2"))]', $div);
+      $tileDesc = $xpath->query('.//*[contains(@class, "tile__description")
+                                and not(contains(@class, "badge"))
+                                and not(contains(@class, "tile_options"))]', $div);
+      $tilePrices = $xpath->query('.//*[contains(@class, "tile__prices")
+                                  and not(contains(@class, "badge"))
+                                  and not(contains(@class, "tile_options"))
+                                  and not(contains(@class, "tile__price tile__price--original"))]', $div);
+      $productHTML = '';
+      $linkHref = '';
+      if ($tileLink->length > 0) {
+        $linkHref = $tileLink->item(0)->getAttribute('href');
+      }
+      if ($tileItem->length > 0) {
+        $productHTML .= $dom->saveHTML($tileItem->item(0));
+      }
+      if ($tileDesc->length > 0) {
+        $productHTML .= $dom->saveHTML($tileDesc->item(0));
+      }
+      //if ($tilePrices->length > 0) {
+      //  $productHTML .= $dom->saveHTML($tilePrices->item(0));
+     // }
+
+      $html = $html . '<div class="product-tile"><a class="product-link" target="_blank" href="' . $url . $linkHref . '">' . $productHTML . '</a></div>';
+    }
+  }
+  return $html;
+}
+
+function fwembed_shortcode( $atts ) {
+  $options = get_option( 'fourthwall_settings_name' );
+  $value = isset( $options['fourth_url'] ) ? $options['fourth_url'] : 'https://fourthwall.com';
+  $store_html = fwembed_parse_html($value);
+  $store_render = '<div class="fw-store-parent">' . PHP_EOL . $store_html . PHP_EOL . '</div>';
+  return $store_render;
+}
+add_shortcode( 'fourthwall', 'fwembed_shortcode' );